ユニークなタイプが多数!Pure CSSで実装できるプリローダー 5

Tips

ユニークなタイプが多数!Pure CSSで実装できるプリローダー 5

以前にもCSSやSVGなどで実装するプリローダー(ローディングアニメーション)を一度まとめたことがあるんですが、また幾つか使わせてもらう機会ありそうなものや覚えておきたいものが幾つかあったので備忘録です。
今回はいずれもPure CSSで実装したプリローダーとなっており、シンプルでどんなデザインにも合うタイプももちろんありますが、全体的にちょっと変わったものなど他では見ないようなタイプのものが多めです。

※それぞれどのような動きになるかは、各紹介先で用意されているデモで確認してください。

Loaders.css

Loaders.css

全体的にシンプルで使いやすそうなものが全28種類まとめられており、ちょっと変わったものでパックマンがあります。

30 CSS Page Preload Animations

30 CSS Page Preload Animations

「Square」「Round」「Various」と大きく3つのタイプでカテゴリー分けされている全30種類のプリローダー。
よく見かけるものも幾つかありますが、他では見ない変わったタイプのものが多めです。

CSS spinners

CSS spinners

いずれもサークルエレメントを用いたタイプのプリローダーで全20種類あります。

CSS-spinners

CSS-spinners

他では見かけない全7種類のプリローダーがあります。

Pure CSS Loaders kit

Pure CSS Loaders kit

こちらも珍しいタイプのプリローダーが全12種類まとめられており、バッテリーやコーヒーカップなどいずれも他では見かけないユニークなものとなっています。


以下では同じくPure CSSで実装できるものや以外にも、SVGを使用して実装したプリローダーや便利なジェネレータツールなどもまとめているので、興味ある方はこちらもご覧になってみてください。

Posted on

Category : Tips

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