テキスト・記号・特殊記号をCSSアニメーションと組み合わせたローディングスピナー「text-spinners」

Tips

テキスト・記号・特殊記号をCSSアニメーションと組み合わせたローディングスピナー「text-spinners」

「text-spinners」はその名の通りテキストを利用したローディングスピナーを実装できるスタイルシートで、テキスト以外にも記号・特殊記号をCSSアニメーションと組み合わせてローディングスピナーを表現しています。デモにも様々な記号を使った例がありますが、少し変更すれば任意のものに変更できますし、CSSなのでサイズ・カラー・スピードなどの調整についても容易にできます。

text-spinners イメージ

実際の動きはサイトに用意されているデモで確認してほしいのですが、上のイメージのようなローディングスピナーが全30種類あり、いずれも画像などではなくテキスト・記号・特殊記号を利用しています。
動きとしてはCSSのcontentkeyframesを組み合わせていて、例えば「・・・」であればcontentにはcontent: "\A.\A..\A...";と記述し、それをanimation: spin4 2s steps(4) infinite;でアニメーションさせることで見栄えを表現しています。

基本的な実装方法としてはまず必要なCSS(spinners.css)を読み込んで、あとは表示させたい箇所にclass="loading"を指定すれば実装できます。
また、他のスピナーにしたければそれぞれ用意されているクラスをさらに併記し、例えば「Dots」というタイプにしたければclass="loading dots"というように指定します。

既に沢山のタイプが用意されてはいますが、content内を変更すれば任意のテキストや記号にすることもできますし、またサイズ・カラー・スピードなどの調整についてもCSSなので容易にできると思います。

正直全体的に滑らかな動きとは言えませんが、逆にこういった動きにしたいとか簡易的なもので十分という時には便利そうです。
実際の動きの確認や詳細、ファイルのダウンロードは以下より。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.