目的・スタイルで探せる、おしゃれフォント図鑑が登場！【いますぐ見る】
開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化によって自由でカスタマイズ性の高いローディングアニメーションがたくさん登場しています。
今回はコピペで利用できるCSSローディングアニメーションを、コミュニティサイト Codepen よりピックアップしご紹介します。
よりオリジナル性の高いデザインを作成することができ、待ち時間が楽しみになるようなエフェクトを中心に揃えています。どうしてもファイルサイズが大きくなってしまうページなどに活用してみてはいかがでしょう。
詳細は以下から。
待ち時間が楽しくなる、CSSコピペで実装できるローディングアニメーションまとめ
動きに合わせて、背景のグラデーションカラーが美しく変化するローディングアニメーション。
読み込みに合わせて瓶に液体が注がれる、お気に入りローディングアニメーションのひとつ。
Slack アプリロゴにCSSアニメーションを追加しています。
CSSのみで制作されているとは思えないほど滑らかで、思わず見入ってしまいます。
モバイルからタブレット、デスクトップへと変化していくアニメーション。
transformプロパティをうまく利用することで、JS顔負けの滑らかさを実現しています。
複数のボックスが上から落ちてくるようなエフェクトがユニーク。
レインボーカラーで展開されるドット型アニメーション。
まるで立体的に影が当たっている様なユニークなアニメーションが特長です。
CSSのみでデザインされた、シンプルで実践にも活用しやすい素材。
SVGアイコンを利用したローディングアニメーションで、シンプルな実装で豊富な種類が揃います。
波型ウェーブをCSSのみで再現した、滑らかな動きがポイント。
左右にユラユラと揺れる、カラフルな玉を利用したローディングアニメーション。
待ちぼうけを食っている状態を、指の滑らかなアニメーションで再現しています。
Battlefield 3 Loading Indicator
ゲームの読み込み画面をそのまま完全再現し、テキストを変更することで自由に利用できます。
文字テキストが左から右へと流れるアニメーションが素敵です。
四角い箱の柔らかさを表現したシンプルなローディングアニメーション。
文字テキストがくるりと回転するローディング用アニメーション。
まるで生き物のようなスムーズな動きは、待ち時間のあいだもたのしませてくれます。
らせん状のDNA構造をCSSのみで表現した作品。
迫ってくる締切りを、ユニークなイラストアニメーションで再現しています。
Elegant Seagulls’ 10-Year Celebration Badge
某ブランドの10周年を記念したローディングデザイン。
こちらもCSSのみでデザインされた、あまり他では見かけないユニークなアニメーション。
おなじみのAdobeロゴをモチーフにしたローディングアニメーション。
実際に利用されているローディングアニメーションをHTML/CSSのみで再現しています。
細いライン線のみで表現した、ミニマルスタイルのローディングアニメーション。
Preloaders – Styled & Animated with Pure CSS
ウェブの可能性を感じる、CSSのみで制作されたローディング6種。
不思議な動きでじっと見てしまうローディングアニメーションが揃います。
ウネウネと波打つ、グラデーションを使ったライン型エフェクト。
風力発電を連想させる、クルクルと回るローディングアニメーション。
アイロンを掛けている様子を表現した、クリーニング店などのサイトデザインにいかがでしょう。
車がドリフト走行している様子を読み込み画面に活用しているサンプル例。
ルービックキューブを連想させる動きが面白く、いつ揃うのかと思わず見てしまいます。
読み込み状況を細かく分けることで、進捗状況をより分かりやすく伝えることができます。
棚に並べた本がパタパタと倒れるアニメーション。
記号や特殊文字を使って、ローディングアニメーションを作成できるCSSライブラリも公開されていました。
