CSS(一部SVGも使用)で作成されたユニークなローディングアニメーション 15

Tips

CSS(一部SVGも使用)で作成されたユニークなローディングアニメーション 15

見栄えからアニメーションまで基本的にCSS(一部SVGも使用)を使って作成されているユニークなローディングアニメーションを、CodePenにアップされているデモから紹介します。
ローディングはそんなに長い時間表示させることは少ないですし、自分の場合はサクっと汎用的なシンプルなデザインのものを実装することがほとんどですが、こういった部分まで拘りたいとかちょっと面白いアニメーション付けたいってときに参考になるものやインスピレーションもらえそうです。

Loading Idea

See the Pen Loading Idea by Chase (@chasehsbrk238) on CodePen.

HTMLとCSSで作成した三角形を並べ、それらをタイミングずらしてopacityを使うことで見栄えを実装しています。
このデモはすべて同じカラーですが、カラーをバランス良く異なるものに設定するのも良さそうです。

shrinking hexagon

Loading

See the Pen Loading by Daniel Rönnkvist (@danielronnkvist) on CodePen.

このサンプルは順番に浮き上がる感じですが、順番をバラバラにしてみたり、アニメーションを追加して1回目と2回目では浮き上がる順番が異なるようにするなど、ランダムっぽい見せ方をしても面白そうです。

BoxShuffle

See the Pen BoxShuffle by Goran Rakic (@golle404) on CodePen.

Tile adder (no JS, no added elements)

Never-ending box

See the Pen Never-ending box by Pawel (@pawelqcm) on CodePen.

Hourglass Loader

See the Pen Hourglass Loader by Tom Hazledine (@tomhazledine) on CodePen.

Hourglass

See the Pen Loader #5 - Hourglass by Fabrizio Bianchi (@fbrz) on CodePen.

同じく砂時計をモチーフにしたもので、上のものに比べてシンプルな見た目です。

Climbing Ball

See the Pen Loader #2 - Climbing Ball by Fabrizio Bianchi (@fbrz) on CodePen.

CSS Stairs Loader

See the Pen CSS Stairs Loader by Irko Palenius (@ispal) on CodePen.

CSS3 Loader - Audio effect

See the Pen CSS3 Loader - Audio effect by Boris Graeff (@boris-graeff) on CodePen.

音楽に関連するサイトのローディングにピッタリなエフェクトで、CSSなのでバーの太さやカラーも容易に変更できます。
また、カラーを単色ではなくグラデーションにするとよりクールにできそう。

Bookshelf loader

See the Pen #Codevember - Day 6 - Bookshelf loader by Grélard Antoine (@ikoshowa) on CodePen.

本の部分も画像は使用せず、それぞれのひとつのHTML要素(li要素)とCSSを使って実装しています。

'Making pancake' loader

See the Pen 'Making pancake' loader by Pawel (@pawelqcm) on CodePen.

kitchen loading animation

See the Pen kitchen loading animation by Greynor (@greynor) on CodePen.

使用する要素の大きさや組み合わせ方次第で、様々なキッチンレイアウトを表現できると思います。

Spinners & Page Loaders Pure CSS

See the Pen Spinners & Page Loaders Pure CSS by Anya Melnyk (@slyka85) on CodePen.

最後は様々なタイプのローディングがまとめられているデモで、割とよく見かけるものに少し手を加えた感じのものもありますが、全15種類のローダーが基本CSSを使用して作成されています。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.