「Three Dots」は、ひとつの要素に特定のclassを付与することで、3つのドットを用いたローディングアイコンを実装できるスタイルシートです。

「Three Dots」の各種ローディングアイコンのイメージ

実際の見栄えはもっと滑らかに動いていますが、上のキャプチャのように14種類のローディングアイコンを表現できます。
デモにもあるようにHTMLはすべて特定のclassを付与したひとつの要素のみ（デモではdiv要素）で、必要なCSSを読み込んで下記のようなclassを付与することで実装できます。

  • .dot-elastic
  • .dot-pulse
  • .dot-flashing
  • .dot-collision
  • .dot-revolution
  • .dot-carousel
  • .dot-typing
  • .dot-windmill
  • .dot-bricks
  • .dot-floating
  • .dot-fire
  • .dot-spin
  • .dot-falling
  • .dot-stretching

各アニメーション毎にSCSSも分けられているので、そのまま使うのではなく、もう少しカスタマイズしたいというときもそれぞれのSCSSを開くことでベースの動きなどを把握しやすいと思います。

実際の表示・動作確認や詳細については以下より。