CSSやSVGで実装するローディングアニメーション 20+α

  • Posted on
  • Category : Tips
CSSやSVGで実装するローディングアニメーション 20+α

以前であればアニメーションGIFを用いることが多かったローディングアニメーションですが、最近ではSVGを使ったり、見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。また、サンプルやチュートリアル以外に、簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。

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

SpinKit

SpinKit

CSSで実装したローディングアニメーションを全8種類紹介しており、ソースは各アニメーションのページ上部にある「Source」から確認できます。

CSS Spinners

CSS Spinners

様々なタイプのものが全15種類紹介されており、ソースを見たい場合は「jlong/css-spinners · GitHub」で確認できます。

Pure CSS Loading Spinners

Pure CSS Loading Spinners

回転する立方体やバウンドするボールなど全7種類。

Single Element CSS Spinners

Single Element CSS Spinners

全てHTMLはdivひとつで実装されているスピナー全8種類。

Creating a Collection of CSS3 Animated Pre-loaders

Creating a Collection of CSS3 Animated Pre-loaders

CSS3 Loading Animation Loop

CSS3 Loading Animation Loop

Creative CSS Loading Animations

Creative CSS Loading Animations

CSS3 Loading Animation

CSS3 Loading Animation

Single Element Spinner

Single Element Spinner

Border loading indicators

Border loading indicators

borderを使用してローディングアニメーションを表現したもの。

Rotating Circle

Rotating Circle

CSS3 Loading Animation

CSS3 Loading Animation

Pure CSS Loader – Square – Single element

Pure CSS Loader - Square - Single element

Loading Icon

Loading Icon

Pure CSS Loader Ring of Light

Pure CSS Loader Ring of Light

Minimal Throbbers

Minimal Throbbers

CSS3 Loading Animation

CSS3 Loading Animation

Less Loaders

Less Loaders

SVG Loading icons

SVG Loading icons

jxnblk/loading

jxnblk/loading

Loaders Loading!

Loaders Loading!

こちらはCodePenで公開されているローディングアニメーションをまとめているもので、上では紹介していないテキストやプログレスバーを使用したタイプもあります。

ジェネレーター

以下はそれぞれCSSやSVGを使用して実装するローディングアニメーションを作成できるジェネレーターで、ベースを選んでカラー・大きさ・スピードなどを自分好みに変更するだけで簡単に作成することができます。

CSS Load.net – Loading CSS spinners and bars generator for AJAX & JQuery

CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery

loading.io – Your SVG Ajax Loading Icons

loading.io - Your SVG Ajax Loading Icons

Back to Top

CSSやSVGで実装するローディングアニメーション 20+α

CSSやSVGで実装するローディングアニメーション 20+α

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。