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

スピナーは、サイトのページを生き生きさせる面白い方法のひとつです。

GIFとして無料のスピナーを提供するカスタムサイトもたくさんありますが、CSSやSVGを使ってアニメーションを作成したい時には、本記事のリストを利用してみてください。

たとえばAjaxを搭載したアプリをデザインしている場合でも、サイトに楽しいプリローダーを追加したい場合でも、このスニペットはきっと役立つはずです。

 

１．CSSスピナーいろいろ

 

華やかなCSSスピナーコレクションです。回転するサークルやアニメーションバーから、ボールが弾むローダーまで、実に様々なスタイルのアニメーションを見つけられます。

これらのローダーはすべて、どんなプロジェクトにも無料でコピー＆ペーストによる使用が可能です。

スピナーは、ソースコードをダウンロードできるGitHubのリポジトリから来ています。CodePenからのコピー＆ペーストよりも簡単です。

２．日蝕スピナー

 

日蝕をモチーフにした超ユニークなスピナーです。

わずかなHTMLを使用しているだけで、Hamlテンプレートのおかげでさらに簡素になりました。

使い勝手によってはHamlとSassコードをHTML / CSSにコンパイルすることもできます。

 

 

３．スーパーシンプルなCSSスピナー

 

これ以上シンプルなスピナーはないだろうと思うほど、光る曲線がぐるぐる回るだけのスピナーです。

超基本的なコードスニペットで、本記事で紹介するリストの中ではスタイリッシュな部類に入らないかもしれませんが、十分に機能してくれます。

どのウェブサイトにも合うような基本的なスピナーが必要な場合にはオススメ。

 

 

４．Beaultiサークル

 

Beaulti Circleという名前の由来はよくわかりませんが、とてもクールなCSSカスタムスピナーです。アニメーションのスタイルは見ていて楽しいもので、しかもCSSとHTMLだけで構築されているのですから素敵です。

無駄を省いた必要最低限のデザインでありながら目を引くので、カスタムのスピナーとしては完璧です。

企業サイトでは少しカジュアルすぎると感じられそうですが、もう少し明るい青に色を変更して少し小さくするなど、工夫の余地はあるでしょう。

 

 

５．純粋なCSSスピナー

 

色違いのバリエーションと、全色が入ったレインボー色のスピナーです。ハイテクで尖った印象を与える例です。

黒いデザインが合うサイトにはぴったりハマるでしょう。レイアウトに合わせてスピナーの色をカスタマイズしてみてください。

 

 

６．フォントアイコン付きスピナー

 

CSS3のアニメーションを自由なアイコンフォントと組み合わせるという、面白いアイディアによるスピナーです。

このペンには、Icomoonのアイコンがたくさんあります。CSSを使ってグラフィックを回していくことでアニメーション化され、カスタマイズしたスピナーのように表示されます。

もともとカスタムスピナーですので、デザインをいろいろ試してみてください。 15〜20分いじれば、お気に入りを作れるはずです。

 

７．オリンピック・リング

 

これまで見てきた中でも創造性のあるローダーの1つ。

オリンピックのリングをCSS3でHTML文書に組み込むと、この素晴らしいスピナーが手に入ります。

JavaScriptコードが少し必要ですが、アニメーションを直接処理しているのではなくディレイ効果を作り出すために使われています。それ以外はCSSだけです。

わずかな変更でCSSのみで動く仕様に変えることもできます。

 

 

８．CSSオンリーの Androidプリロードスピナー

 

典型的なAndroidローディンググラフィックの後にデザインされた、クールなローディングスピナーセットです。

Androidを使ったことがある人は、読み込み中の画面で目にしたことがあるでしょう。100％のレプリカではありませんが、かなり似ています。

このペンはCSSだけを使用しているので、Web開発者は選択肢に入れておきたいところ。

 

９．バウンスディレイローダー

 

厳密に言うとスピナーではありませんが、あまりにカッコイイのでリストに入れました。

開発者は、わずかなCSSとほんの少しの創造的な気まぐれを掛け合わせて、このバウンスローダーボールをゼロから作成しました。

コード自体はHaml＆SCSS上で動作しますが、CodePen内のHTML / CSSに簡単にコンパイルできます。プリ・プロセスに精通していない場合は、ページにコピー＆ペーストする方が簡単かもしれません。

 

 

１０．回転ドット

 

ドットが回転するスピナーです。すべてのドットは一列に並ぶように減速し、その後スピードアップするようにデザインされています。

間違いなくサイト体験を変えてくれ、しかもどんなレイアウトにも簡単に融合できるほど小さなものでもあります（8行のHTMLと50行未満のCSSで機能させることができます）。

 

 

※本記事は、10 Free CSS Loading Spinner Snippets For Web Designers & Developersを翻訳・再構成したものです。

 

 

▼こちらの記事もおすすめです！