CSSだけで実装するクリエイティブなローディングアニメーション20選

CSSを使って実装するローディングアニメーションを紹介します。以前はGIFアニメーションを使うことが多かったのですが、最近はCSSアニメーションで実装することが増えてきました。CSSでローディングアニメーションを実装する事で、細かな調整が簡単にできるようになりました。また、SVGを組み合わせることで、表現の幅も広がります。

CSSだけで実装するローディングアニメーション20選

1. SVG Loaders

SVG Loaders
SVG Loaders | デモ | 紹介

SVGを使ったローディングアニメーションです。12種類のローディングエフェクトが用意されています。SVGを使った美しい表現が特徴です。

2. CSS Spinners

CSS Spinners
CSS Spinners

CSSライブラリを使って実装するローディングアニメーションです。全19種類のアニメーションが用意されています。どれもオリジナリティのある表現で、デザインアクセントとして使えます。

3. Loaders.css

Loaders.css
Loaders.css | デモ | 解説

CSSだけで実装できる28種類のローディングアニメーションのライブラリです。ライブラリとして公開されているので、実装も簡単です。

4. SpinKit

SpinKit
SpinKit | デモ

11種類のローディングアニメーションが用意されています。デモページ上部にある「Source」ボタンからコードを表示することができます。

5. CSS3 Essentials for Creating Pre-loaders

CSS3 Essentials for Creating Pre-loaders
Creating a Collection of CSS3 Animated Pre-loaders

全部で6種類のローディングアニメーションの実装方法が紹介されています。HTMLとCSSコードのコピペで実装することが可能です。

6. CSS3 Loading Animation

CSS3 Loading Animation
CSS3 Loading Animation

2つのオブジェクトが重なりながら左右に移動するローディングアニメーションです。シンプルなのでミニマルなデザインにもよく合います。

7. CSS3 Loading Animation

CSS3 Loading Animation
CSS3 Loading Animation

丸いボール型のオブジェクトがウェーブのように動くローディングアニメーションです。動く際に丸が少し潰れたような表現まで細かく再現されており、シズル感があります。

8. Pure CSS Loader – Square – Single element

Pure CSS Loader - Square - Single element
Pure CSS Loader – Square – Single element

9つの正方形のオブジェクトが積み重なって、大きな正方形を作るローディングアニメーションです。最後の正方形の色が他の正方形とは異なっており、アクセントになっています。

9. Loading animation with CSS

Loading animation with CSS
Loading animation with CSS

文字に少しずつ色がついていくような表現のローディングアニメーションです。文字は普通のHTMLテキストなので、任意のものに簡単に変更することができます。

10. Fade Loading

Fade Loading
Fade Loading

クールなローディングアニメーションです。液体の中から文字が浮かび上がるような、スムーズな動作が特徴です。

11. Creative CSS Loading Animations

Creative CSS Loading Animations
Creative CSS Loading Animations | デモ

CSSで実装する5種類のクリエイティブなローディングアニメーションです。オリジナリティのあるローディングアニメーションを実装することができます。

12. Rotating Circle

Rotating Circle
Rotating Circle

ドットの集合が円をつくる、独創的な動きのローディングアニメーションです。

13. CSS3 Loading Animation

CSS3 Loading Animation
CSS3 Loading Animation

縦のラインがウェーブのように波打つCSSローディングアニメーションです。

14. Border loading indicators

Border loading indicators

CSSでBorderを使って表現するローディングアニメーションです。6種類のアニメーションが用意されています。

15. Single Element CSS Spinners

Single Element CSS Spinners
Single Element CSS Spinners | デモ

シンプルなコードで実装する8種類のCSSローディングアニメーションです。デモページで、それぞれのアニメーションの下にある「View Source」からコードを見ることができます。

16. Single Element Spinner

Single Element Spinner
Single Element Spinner

ラインが回転する、シンプルなローディングアニメーションです。6種類のパターンが用意されています。

17. Text Spinners

Text Spinners
Text Spinners | デモ | 解説

CSSだけで30種類のローディングアニメーションを実装することができるライブラリです。ドットやラインを使ったベーシックなものから、猿や人のUnicode Emojiを使った変わり種まで幅広いアニメーションが用意されています。

18. CSS3 Loading Animation Loop

CSS3 Loading Animation Loop
CSS3 Loading Animation Loop | デモ

CSSで実装する3種類のローディングアニメーションです。クリクルと回る光の輪が印象的です。

19. Loading Icon

Loading Icon
Loading Icon

4つの三日月型のオブジェクトが回るCSSローディングアニメーションです。

20. Pure CSS Loader Ring of Light

Pure CSS Loader Ring of Light
Pure CSS Loader Ring of Light

CSSだけで作られた、光のリングが回るローディングアニメーションです。

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

コメント

  • Posted on
  • Updated on
  • Views 4,115