Blog

ブログ

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

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

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

目次

Pure CSS3 Loading Spinner

CSS3 Loading Animation

Metro style loading animation in pure CSS

Loading Middle Spin

CSS astral loader

Animated CSS Loader

Simple Gray Jet Loading Ripple

css loader (pulse)

Tiny loader

CSS3 Loading Animation

iOS GMail Loading Animation

まとめ

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

このページを共有

関連記事

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

  1. iPhone X向けに対応するポイントをまとめてみたよ

    iPhone X向けに対応するポイントをまとめてみたよ

  2. これから必須のFlexboxを案件で使ってみた

    これから必須のFlexboxを案件で使ってみた

  3. iPhone/Androidアプリのデザインをしてみて

    iPhone/Androidアプリのデザインをしてみて