(旧)アストのファンネル

スマホ・ライフハック・オトク情報などオールレンジなブログ

ユーザーを待たせてる間も楽しさを！個性のあるローディング画像・エフェクト20選

まとめ

f:id:ast-ray:20150209230306j:plain

サイトの読み込み中に表示させるローディング画像・エフェクトですが、 待ち時間を少しでも楽しくさせるために色々工夫しているサイトやアプリも多いですね。

自分のサイトの導入に参考になるようなローディング画像やエフェクトを厳選してみたので、参考にしてみてください。

ジェネレーター系

色々なパターンから色や背景などを指定して作ることができます。

f:id:ast-ray:20150209224705j:plain

SVGでのローディングアニメーションを生成することができます。

f:id:ast-ray:20150209224755j:plain

Preloadersよりもシンプルなジェネレーター。

f:id:ast-ray:20150209224834j:plain

豊富なサンプルから選んで、色などをカスタマイズできます。

f:id:ast-ray:20150209224904j:plain

SVGでのローディングアニメーション

SVGで作られたローディングアニメーションのアイコン集です。全部で12種類

f:id:ast-ray:20150209225026j:plain

SVG製のローディングアイコン。全部で6種類。

f:id:ast-ray:20150209225059j:plain

CSSによるローディング

CSS3で作られたローディングアイコン。楽しい動きが多いです。

f:id:ast-ray:20150209225140j:plain

CSSによるローディングアイコン。全部で19種類もあります。

f:id:ast-ray:20150209225406j:plain

CSSによるローディングアニメーション。

f:id:ast-ray:20150209225307j:plain

フラットデザインでCSSでのローディング。8種類あります。

f:id:ast-ray:20150209230103j:plain

jQueryでのローディング

指定した要素にローディングを付けられるjQueryプラグイン

f:id:ast-ray:20150209225221j:plain

マウスカーソルの横にローディングを表示するjQueryプラグイン

f:id:ast-ray:20150209225501j:plain

jQueryプラグインでのローディングアニメーション。

f:id:ast-ray:20150209225544j:plain

目を引くローディング

跳ねたり回転したりと多彩なパターンが用意されているライブラリ。

f:id:ast-ray:20150209225639j:plain

ローディング前後の切り替えがクール。

f:id:ast-ray:20150209225707j:plain

Materialデザインでのローディングアニメーションです。

f:id:ast-ray:20150209225724j:plain

ページ全体に表示され中央にローディングが表示されるエフェクトです。
ローディング画像は自分の作った画像などにもできるようです。

f:id:ast-ray:20150209225758j:plain

テキストフォームの上部などにもローディング(プログレスバー)が表示できるJavascript。

f:id:ast-ray:20150209225817j:plain

LOADINGの文字がふわっと浮くローディングエフェクトです。

f:id:ast-ray:20150209225847j:plain

ボタン自体がローディング（プログレスバー）という面白いタイプのボタン。
18種類もあります。見てて楽しい。

f:id:ast-ray:20150209225920j:plain

いかがでしたでしょうか。

ちょっとした遊び心を加えるだけで、サイトの印象が変わると思うので参考にどうぞ。