ブログ

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

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

Progress Bars

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

loading circle

css loader (pulse)

Tiny loader

CSS3 Loading Animation

iOS GMail Loading Animation

まとめ

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

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。