イケてるローディング・アニメーション25選

イケてるローディング・アニメーション25選

  • このエントリーをはてなブックマークに追加

最近はギガ単位のデータをダウンロードすることもさほど珍しくはなくなってきましたが、ネット上の大容量のデータを受信してサービスが動作するまでに欠かせないのがローディング・アニメーションだったりします。

今回はこのローディング・アニメーションについて良さそうなものをピックアップしてみましたので、ぜひともチェックして使ってもらえればです。

関連:使える!CSSアニメーション 20選

目次

  1. ちょっとクール CSS loading animation 12
  2. ゲームで見かける Rotate / Pulse Loading Animation
  3. ヘキサゴンアニメーション overwatch loading by css3
  4. CSSのみ Cube Flipping Loader
  5. クラウドスパイラル Cloudy Spiral CSS animation
  6. 心地よい動き Hexagonal Loading Animation
  7. 動きに目が止まる Floating Loading Animation
  8. ブロックループアニメーション Compose loading animation
  9. 色をアレンジして楽しめる Android Nougat Loading Rings
  10. 飛び跳ねる生き物のよう Colourful loading animation
  11. 目に見えない四角形 Square in a circle
  12. 六角形 Hexagon Preloader
  13. クラウドにアクセス感 Implementation of Animated Icons : Volume II
  14. ゲームで気を紛らわす Tower Blocks
  15. シンプルに Loading Idea
  16. 終わりがないけど気になる Infinite domino loader
  17. 一味違うローディング Corange Loading Screen
  18. 振り子 Newton’s Cradle Loader
  19. ノリに乗っている Loading
  20. まるで生き物 Loading Icon
  21. ずっと見ていたくなる squareception
  22. カラフルな CSS preloader!
  23. 折り紙のような動き Cube Fold
  24. 動きが気になる Animated SVG Spinner
  25. パルスな Smooth Pulse

ちょっとクール CSS loading animation 12

CSSだけで描かれたものです。

ゲームで見かける Rotate / Pulse Loading Animation

ゲームで見かけそうなローディングです。

ヘキサゴンアニメーション overwatch loading by css3

ローディングでなぜか見かけることの多いような気がする六角形のアニメーションです。

CSSのみ Cube Flipping Loader

シンプルですが、アクセントに使いたいですね。これもCSSのみです。

クラウドスパイラル Cloudy Spiral CSS animation

あまり見ないタイプのアニメーションなので、ユーザーの目には止まりやすいのではないでしょうか。

心地よい動き Hexagonal Loading Animation

心地よい動きのループです。

動きに目が止まる Floating Loading Animation

動きに思わず目を止めてしまうアニメーションです。

ブロックループアニメーション Compose loading animation

延々と見ていられそうなループです。

色をアレンジして楽しめる Android Nougat Loading Rings

色をアレンジすれば色々と使えそうです。

飛び跳ねる生き物のよう Colourful loading animation

まるで生き物のような動きをします。

目に見えない四角形 Square in a circle

四角形があるわけではないのに、四角形が見えてしまう動きが面白いです。

六角形 Hexagon Preloader

動きがぎこちなく感じる場合は、下記リンク先にアクセスしてみてください。
https://codepen.io/weaintplastic/pen/qEMZbx

クラウドにアクセス感 Implementation of Animated Icons : Volume II

クラウドにアクセス、ローディングしている感が感じられます。

ゲームで気を紛らわす Tower Blocks

ローディングというよりも、ゲームです。ユーザーを待たせている間、ゲームをやって貰うことで待ち時間を感じさせない工夫を凝らせることができます。

シンプルに Loading Idea

これもシンプルですが、アクセントで使いたいシンプルならローディングです。

終わりがないけど気になる Infinite domino loader

いつか終わりがあるんじゃないかと感じさせてくれるループアニメーションです。

一味違うローディング Corange Loading Screen

サイト関連のデータをロード、チェック、と一味違うローディングが楽しめます。動きがない場合は、右下の「Return」をクリックしてください。

振り子 Newton's Cradle Loader

振り子ですね。

ノリに乗っている Loading

ノリに乗ってそうなポンピングがいいですね。

まるで生き物 Loading Icon

サンプルが多すぎて動きが鈍くなっているようなら下記のリンク先で見てください。
https://codepen.io/bennettfeely/pen/jEwXJO

ずっと見ていたくなる squareception

コレ系はなんか不思議な感じがあって思わず見ていたくなります。

カラフルな CSS preloader!

ド派手なアニメーションのローディングです。かなり目を引くのではないでしょうか。

折り紙のような動き Cube Fold

四角形が徐々に折りたたまれて箱ができあがるというアニメーションですが、これもCSSアニメーションプリローダーにおすすめです。

動きが気になる Animated SVG Spinner

なんのアニメーションだろう?とユーザーの興味を引きつける動きのプリローダーです。

パルスな Smooth Pulse

これもシンプルですが、プリローダーに使え、マウスオーバーをするとさらに色が変わります。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に携わり、その後、便利な用務員に。Hep Hep!にてeizとして記事執筆中。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
Wantedly 採用情報はこちら

新着の記事

mautic is open source marketing automation