[CSS]コピペで簡単に利用できる、シンプルでセンスのあるアニメーションが気持ちいいプリローダー

円の軌跡に沿って、ドットだけをさまざまなアニメーションで動かしたシンプルでセンスのあるプリローダーを紹介します。

cubic-bezier()を使用した緩急のあるアニメーションは、タイミングをずらすことで、気持ちいい動きになっています。

デモのキャプチャデモのアニメーション

Pure CSS Animated circular dot preloaders

デモページでは12種類のプリローダーがあり、ドットの数やアニメーションがそれぞれ異なります。

HTMLの基本構造は共通です。ドットの数によって、.dotのdiv要素が増減するだけです。

1つ目なので、CSSはアニメーション部分だけでなく、ボックスやドットなどのスタイルを含む全部を掲載しました。
2つ目以降はL.30-37を入れ替えるだけで、他はすべて共通で利用できます。

top of page

©2018 coliss