Blog

ブログ

今すぐ使える、​ローディングな​CSSを​CodePenで​調べてみた

  • Web制作
  • 記事公開日:
今すぐ使える、ローディングなCSSをCodePenで調べてみた

去年やったUI/UXな案件を何件かやらせていただきました。
ある案件で「CSS3を使ったローディングなビジュアル」を使ってみたらどうかと提案してみたらお客さまが採用していただいたのですが、そのとき調べて「イイ感じ」と思えたローディングなCSSのコードをいくつか紹介したいと思います。

Pure CSS3 Loading Spinner

See the Pen Pure CSS3 Loading Spinner by Ryan W Moore (@ryan-w-moore) on CodePen.

CSS3 Loading Animation

See the Pen CSS3 Loading Animation by Max (@MyXoToD) on CodePen.

Metro style loading animation in pure CSS

See the Pen Metro style loading animation in pure CSS by Girish Sharma (@grssam) on CodePen.

Loading Middle Spin

See the Pen Loading Middle Spin by Davilious (@davilious) on CodePen.

CSS astral loader

See the Pen CSS astral loader by Hugo Giraudel (@HugoGiraudel) on CodePen.

Animated CSS Loader

See the Pen Animated CSS Loader by Adam Jenkins (@frecklebit) on CodePen.

Simple Gray Jet Loading Ripple

See the Pen Simple Gray Jet Loading Ripple by theSLY (@theSLY) on CodePen.

css loader (pulse)

See the Pen css loader (pulse) by Leland Kwong (@LelandKwong) on CodePen.

Tiny loader

See the Pen Tiny loader by Resource Guru (@resourceguru) on CodePen.

CSS3 Loading Animation

See the Pen CSS3 Loading Animation by seth kontny (@sethkontny) on CodePen.

iOS GMail Loading Animation

See the Pen iOS GMail Loading Animation by Matteo Currò (@curromatteo) on CodePen.

まとめ

ちなみに、CSSアニメーションに対応しないブラウザにはアニメーションGIFで対応しています。
Codepenには、これ以外にも「イイ感じ」なサンプルがたくさんあります。IE9以上対応な案件やスマートフォン対応な案件など、ちょっとアレンジしたらサイトに似合う「イイ感じ」なローディングを今すぐ使えます。サンプルに自分なりのアレンジを追加して、ぜひ使ってみたらいかがでしょうか?

このページを共有

関連記事

この記事を読んだ人はこの記事も読んでいます

  1. IE9でSVGグラデーションを使う場合の注意事項
    IE9でSVGグラデーションを使う場合の注意事項
  2. CSS Transformsで画面がちらつくときの対処法
    CSS Transformsで画面がちらつくときの対処法
  3. iPhone X向けに対応するポイントをまとめてみたよ
    iPhone X向けに対応するポイントをまとめてみたよ
ページの上部に戻る