CSSPINを使用して単一要素のスピナーとローダーを作成する

あなたはCSS3を使っていくつかの素晴らしいことを構築することができます カスタム入力フィールド に ドロップダウン そしてさらに ベクトルグラフィック. これらのテクニックは すぐにJavaScriptを追い越す, 開発者がより良いユーザーエクスペリエンスを作り出すことをより簡単にする.

構築するのが最も難しいものの1つは スピナーアニメーションの読み込み しかし現代のCSSアニメーションはそれをかなり簡単にさえします.

ゼロから構築する時間を節約するために、次のようなライブラリを使うことができます。 CSSPIN のトンで 定義済みのカスタムスピナー. これらのアニメーションはすべて無料で複製でき、完全にオープンソース化されているので、 全権アクセス あなたが望むようにコードを編集する.

このライブラリでスピナーを設定するのは簡単です。あなただけ CSSライブラリをコピーする あなたのページに カスタムHTML要素を追加する あなたがそれらを出現させたいところはどこでも.

これらのカスタムスピナーは使用のみ 1つのHTML要素 アニメーション効果を作成します。グラフィックとアニメーションの効果が 純粋にCSSクラスを通してレンダリングされる.

そして、あなたはソースコードにアクセスできるので 形、色、サイズ、およびアニメーション速度を置き換える あなたのプロジェクトによりよく合うように.

コードに注意してください LESS構文を使用しますか, そのため、主要な編集を行うには、その前処理言語に精通している必要があります。.

しかし、あなたはたくさん見つけることができます プレーンなCSSの例 メインデモページに 簡単な説明 GitHubページ.

おなじみの方 午後 または バウワー これらは 代替方法 ライブラリをインストールするため.

どのようにインストールしても、これは素晴らしいCSSアニメーションライブラリです。それがあることを意味 完全モジュラー 新しいスピナー、新しいアニメーション、および他の開発者によるカスタマイズのための十分なスペースがあります。.

詳細を知り、すべてのドキュメントを閲覧するには、 CSSPINレポジトリのGitHub. 作成者はまた小さいを作りました 設定ビデオ あなたが下で見ることができること.