画像を使わずにCSSだけで30種類のローディングアニメーションを実装できる「Text Spinners」

画像を使わずにCSSで実装するドットのローディングアニメーション「Text Spinners」
Text Spinners

Text Spinnersは、画像を使わずにCSSだけで30種類のローディングアニメーションを実装できるCSSライブラリです。

画像を使わずにCSSで実装するドットのローディングアニメーション「Text Spinners」

スポンサーリンク

Text Spinnersの特徴

  • CSSだけでローディングアニメーションを実装できる
  • 画像ファイルを使わない
  • 実装はシンプル設計でclass=””を指定するだけ

ローディングアニメーション一覧

30種類のローディングアニメーションを実装できます。デモページを用意しました。

ローディングアニメーション

使い方

GitHubの右側にある「Clone or download」の中にある「Download ZIP」ボタンからダウンロードすることができます。

ダウンロード

展開したフォルダに入っているspinners.cssを使います。

CSS

spinners.cssを読み込みます。

デモ用にボタンのスタイルを調整します。

HTML

class=""の指定を変更するだけでローディングアニメーションを変更することができます。

Ellip (default)

Ellip (default)

Dots

Dots

Dots2

Dots2

他のローディングアニメーションも同様にclass=""を変更することで指定できます。ダウンロードしたフォルダに入っているindex.htmlが参考になります。

スポンサーリンク
Text Spinners – 画像を使わずにCSSだけで30種類のローディングアニメーションを実装できる

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.10.05
  • Views 524