以前にもCSSやSVGなどで実装するプリローダー（ローディングアニメーション）を一度まとめたことがあるんですが、また幾つか使わせてもらう機会ありそうなものや覚えておきたいものが幾つかあったので備忘録です。今回はいずれもPure CSSで実装したプリローダーとなっており、シンプルでどんなデザインにも合うタイプももちろんありますが、全体的にちょっと変わったものなど他では見ないようなタイプのものが多めです。
※それぞれどのような動きになるかは、各紹介先で用意されているデモで確認してください。
Loaders.css
全体的にシンプルで使いやすそうなものが全28種類まとめられており、ちょっと変わったものでパックマンがあります。
30 CSS Page Preload Animations
「Square」「Round」「Various」と大きく3つのタイプでカテゴリー分けされている全30種類のプリローダー。
よく見かけるものも幾つかありますが、他では見ない変わったタイプのものが多めです。
CSS spinners
いずれもサークルエレメントを用いたタイプのプリローダーで全20種類あります。
CSS-spinners
他では見かけない全7種類のプリローダーがあります。
Pure CSS Loaders kit
こちらも珍しいタイプのプリローダーが全12種類まとめられており、バッテリーやコーヒーカップなどいずれも他では見かけないユニークなものとなっています。
以下では同じくPure CSSで実装できるものや以外にも、SVGを使用して実装したプリローダーや便利なジェネレータツールなどもまとめているので、興味ある方はこちらもご覧になってみてください。