「Three Dots」は、ひとつの要素に特定のclassを付与することで、3つのドットを用いたローディングアイコンを実装できるスタイルシートです。
実際の見栄えはもっと滑らかに動いていますが、上のキャプチャのように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を開くことでベースの動きなどを把握しやすいと思います。
実際の表示・動作確認や詳細については以下より。