CSSをコピペするだけで簡単に実装できる! ディズニーからインスピレーションを得た、美しいローディング

真っ白に輝くドットがくるくる廻りながらブルーの尾を引く、ディズニーからインスピレーションを得て実装されたローディングを紹介します。

HTMLはdiv要素の一つだけ、あとはCSSをコピペするだけで実装できます。

ディズニーからインスピレーションを得た、美しいローディング

実際の動作は、デモページでご覧ください。

See the Pen
Disney Style CSS Loader 🤙
by coliss (@coliss)
on CodePen.

実装のポイントは、まずHTMLはdivだけの単一要素で実装していること。

ローディングのアニメーションは、CSSのみで実装されています。疑似要素でリングを作成し、それを要素に対してオフセットの白いドットを作成します。白いドットの輝きは疑似要素を使用し、オフセットを-50%に設定し、blurフィルターを適用しています。

元ネタは、下記ポストより。

sponsors

top of page

©2024 coliss