[CSSコピペ] ローディング(Loading…)アニメ実装方法+デザインスニペット15選。
初心者でもコピー&ペーストで実装できるpure cssサンプル。ローディング(Loading…)画面の表示方法。
画面表示時や登録処理時のローディング(Loading…)アニメーションは、エンドユーザーに処理中であることを知らせるためにも重要です。特に最近は凝ったデザインのローディング画面を見かけることも増えました。
本記事ではローディング(Loading…)アニメーションのデザインサンプルを紹介・解説します。通常のhtmlウェブサイト・WordPressなど幅広く利用いただけると思います。
まずは実際に動作するサンプルを載せます。
説明のためローディングも入力フォームもシンプルなものにしていますのでご容赦ください。入力フォームの上に被せられたローディングのdivによって、しっかりと入力欄が保護されていることがわかるかと思います。
ローディング画面の実装はこのように上に被せるdivタグなどを事前に用意しておいて、必要に応じてjQueryなどで表示・非表示を切り替える処理を実装することが基本となります。
See the Pen
css loading sample by KodoCode (@KodoCode)
on CodePen.
シンプルなローディングアニメーション5選。実用性が高い。
See the Pen
Three Dots – CSS loading animations made by single element by Zongbin (@nzbin)
on CodePen.
3つのスピナーを使ったシンプルなローディングサンプル集。
非常に実用性が高いですね。
See the Pen
CSS Loading Animations by Alex (@AlexWarnes)
on CodePen.
非常に多くのローディングサークルのサンプルが載っている1枚。
See the Pen
CSS Loading by MOOOS (@mohammadmusaei)
on CodePen.
こちらもたくさんのサンプルを載せています。
シンプルなデザインのローダーにしたい場合は参考になります。
See the Pen
Single-Element CSS Loaders by Jason Kobilka (@jkobilka)
on CodePen.
スピナーがサークルだとつまらないという人向け。
様々なデザインの動きのあるサンプルがまとまっています。
See the Pen
Pure CSS Loading indicator by ilwcss (@ilwcss)
on CodePen.
全画面を覆う場合は、ヘタにスピナーを動かさずにローディング中であることを表示するデザインもアリだと思います。
こちらもシンプルですが非常に参考になりますね。
カッコいいローディングアニメーション10選。スタイリッシュ!面白い!
See the Pen
Loading by dissimulate (@dissimulate)
on CodePen.
loadingの文字が流れていくスタイリッシュなデザインです。
背景が濃いめ&画面全体に適用されるローディングでしか使えないかもしれないですが、非常にカッコいいですね。
See the Pen
CSS loading animation 12 by Martin van Driel (@martinvd)
on CodePen.
3本の線が重なっていて、こちらもキレイなサンプルです。
ただしデザイン的にローディング中であることがわかりにくいかもしれません。
See the Pen
Simple CSS Loading animation by Dom Sammut (@domsammut)
on CodePen.
コチラも非常にスタイリッシュなローディングのサンプルです。
ホバーすると色が変わる仕組みも面白いです。個人的には今回紹介するサンプルの中で一番気に入っています。
See the Pen
css loading #01 by webhybrid (@Webhybrid)
on CodePen.
回転させるサークルに一工夫を加えたデザインサンプル。
こちらもカッコいいです。
See the Pen
loading animation by hafiz fattah (@hafizfattah)
on CodePen.
円が動くシンプルなローディング画面ですが、使い勝手は良さそうです。
See the Pen
CSS Loading animation. by Robert Lemon (@rlemon)
on CodePen.
かなり作り込んでありますが、流れてくるライトのようなサークルがカッコいいです。
上のボタンでサークルの色を変えられます。
See the Pen
CSS Loading Animation by Ahmad Emran (@ahmadbassamemran)
on CodePen.
ピョンピョンとボールのように跳ねるローディング画面です。
非常に可愛いらしいデザインですね。keyframesのコードは参考になります。
See the Pen
Loading screen by Luka Butina (@luka-butina)
on CodePen.
複数の円が回転するタイプのローディングサンプル。
カラフルで楽しいですね。
See the Pen
Loading! by RenGM (@Vidy)
on CodePen.
こちらも複数の円を使ったローディングサンプル。
単色ですが動きがあって非常にスタイリッシュです。
See the Pen
Pure CSS Loading Cat by TouNeko (@touneko)
on CodePen.
ネコが回ってます(笑)
とても可愛いですね。ネコは伸びますからね(笑)
以上となります。
ローディングは画面上に長く表示されるものではありませんが、やはり美しいデザインだと読み込みを待つのも苦になりません。
是非、サンプルを参考にして実装してみてください。