CSSで作るローディングスピナー！カスタムできるフリー・スニペットを10種類紹介！

スピナーは、サイトのページを生き生きさせる面白い方法のひとつです。
GIFとして無料のスピナーを提供するカスタムサイトもたくさんありますが、CSSやSVGを使ってアニメーションを作成したいときには、本記事のリストを利用してみてください。
たとえばAjaxを搭載したアプリをデザインしている場合でも、サイトに楽しいプリローダーを追加したい場合でも、これらのスニペットはきっと役立つはずです。
 
１．CSSスピナーいろいろ
 
華やかなCSSスピナーコレクションです。回転するサークルからアニメーションバー、はてはポンスタイルのローダーまで、実に様々なスタイルのアニメーションを見つけられます。
これらのローダーはすべて、どんなプロジェクトにもコピー/ペーストしてフリーで使用可能です。
スピナーは、ソースコードをダウンロードできるGitHubのリポジトリから来ています。CodePenからのコピー＆ペーストよりも簡単です。
 
 
２．日蝕スピナー
 
日蝕をモチーフにしたスーパー・ユニークなスピナーです。
すべてが本当に少しだけのHTMLに依存しており、Hamlテンプレートのおかげでさらに簡素になりました。
もしそちらの方が簡単に感じるなら、HamlとSassコードを明快なHTML / CSSにコンパイルすることもできます。
 

リンク元