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

  • Posted on
  • Category : 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なので容易にできると思います。

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

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。