ローディングアニメーションをCSSで表現する「text-spinners」

見本

See the Pen text-spinners by Yuta Kiyama (@yutakiyama) on CodePen.

text-spinnersに色々サンプルがあります。

実装方法

HTML内に以下のソースを入力。 ソースを確認は、GitHubのspinners.cssで確認できます。

<link rel="stylesheet" href="http://tawian.io/text-spinners/spinners.css">

<button>Loading <span class="loading"></span></button>

どうやって動いているのか

text-spinnersはキーフレームアニメーションを使って、要素をステップごとに1line-heightずつシフトさせて、擬似的にアニメーションを表示させているみたいです。

見本の１個目に表示した、. → .. → ... の動きを見てみると、

.loading::after {
  display: inline-table;
  white-space: pre;　/* 文中の改行をそのまま表示 */
  text-align: left;
}

.loading::after {
  content: "\A.\A..\A...";
  animation: spin4 2s steps(4) infinite;
}

@keyframes spin4  { to { transform: translateY( -6.0em); } }

で構成されています。 content内の\Aは改行を表していて、実際には、

[スペース]
↓
.
↓
..
↓
...

のように1フレームずつシフトしているように見えます。 ちゃんと説明できていませんが、text-spinnersのページ下部のHow it worksのアニメーションを見るとわかると思います。 JavaScriptで実装する方法もあると思いますが、CSSで実装してみるのもいいかもしれませんね！