CSSやSVGで導入できるおすすめ「ローディングアニメーション」を紹介します!

スポンサーリンク

カフェでまったりするのが大好きな四条せつなです。

最近密かに人気があるのが、「ローディングアニメーション」です。単なる遊びっぽい感じですが、ユーザーにロード時間を短く感じさせる効果もあるので、導入の余地ありです。しかし、どうやって導入すればよいか分からない…導入が難しそう…そんなイメージもありますよね?

四条ねこ
「ローディングアニメーション」は、1から作ろうとすると難しいかもだけど、実は”テンプレート”が結構あるんだよー!これを使えば、簡単に「ローディングアニメーション」が、導入出来ちゃうっ!

ただ、「ローディングアニメーション」のテンプレートもかなりの数があります。なので、導入がしやすいおすすめの「ローディングアニメーション」を5つ紹介します。

1.「SpinKit」

SpinKit

「Spinkit」には、11種類ものアニメーションがあります。

アニメーション自体はCSSでコーディングされているので、導入も簡単ですね!フラットで、カラーもキャッチーな感じです。

ソースコードは画面上の「Source」か、「GitHub」で取得することができます。

四条ねこ
どれもフラットで、可愛いローディングアニメーションだねっ!

SpinKitを見てみる

2.「Creating a Collection of CSS3 Animated Pre-loaders」

Creating a Collection of CSS3 Animated Pre-loaders

「Creating a Collection of CSS3 Animated Pre-loaders」には、6種類ものアニメーションがあります。

こちらも、アニメーション自体はCSSでコーディングされています。 どれもフラット&カラフルで、白基調とするものです。シンプルなサイトに合いそうですね!

ソースコードは、ページ上に公開されております。

四条ねこ
色の使い方が秀逸!

Creating a Collection of CSS3 Animated Pre-loadersを見てみる

3.「Single Element Spinner」

Single Element Spinner

「Single Element Spinner」は、上の6種類のローディングサークルです。

カラーはCSSで簡単に変更可能です。 非常にシンプルで、サークルの回転も早いので、上手く使えばローディングが早いサイトのように見せることができるですね。

ソースコードは、「codepen」上にあります。

四条ねこ
ブログとかよりも、サービス系のサイトに合うかもっ!?

Single Element Spinnerを見てみる

4.「Pure CSS Loader Ring of Light」

Pure CSS Loader Ring of Light

「Pure CSS Loader Ring of Light」は、今までとは変わって、ダークでクールなローディングアニメーションです。

シンプルだけど、高級感が欲しい人に打ってつけですね!意外と、こういうデザインは珍しいです。

ソースコードは、「codepen」上にあります。

四条ねこ
ローディングアニメーションの中では、珍しいクール系!

Pure CSS Loader Ring of Lightを見てみる

5.「Rotating Circle」

Rotating Circle

「Rotating Circle」は、背景が美しい、ローディングアニメーションです。

ローディングサークルもゆったりした回転で、落ち着きのある印象を受けます。 写真中心のポートフォリオサイト等に、合いそうな感じですね。

ソースコードは、「codepen」上にあります。

四条ねこ
画像ありきのローディングアニメーションも珍しいよねっ!

Rotating Circleを見てみる

せつなのまとめ

「ローディングアニメーション」は、見ていて楽しいだけでなく、ユーザーの離脱を防ぐ効果もあります。導入が難しいイメージですが、今回紹介したように”テンプレート”がたくさん公開されているので、最初はそれをつかうのがいいかもですね。コピペで簡単に貼り付けられるものも多いですし、何より見ていて楽しいですよねっ!

四条ねこ

つまりは…

  • 「ローディングアニメーション」はテンプレめっちゃある!
  • ユーザーの離脱を防ぐ効果もある!
  • とにかく楽しい(笑)

って、ことだねっ!

ということで、“CSSやSVGで導入できるおすすめ「ローディングアニメーション」を紹介します!”でした!でわでわっ!

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です