WEBサイトやアプリの読み込みで表示されるローディング画面/ロード画面。
昔は画像で作られていましたが、最近ではCSSやjsで作られたものが多く、アニメーションもオシャレです。
そこで本日はコピペで簡単に使えるCSSとjsで作られている動くアニメーションローディング画面/ロード画面をご紹介します。
ぜひ使用する機会があれば参考にしてみてください。
目次
Pure CSS Loader Dots
See the Pen Loader dots by Dave DeSandro (@desandro) on CodePen.
ドットが動く見ていて面白いローダー。
すべてCSSで書いてあります。
筆者個人的にイチオシです。
マルチアニメーションローダー
See the Pen CSS Loading Animation by Glen Cheney (@Vestride) on CodePen.
少し複雑な動きをするアニメーションローディングバーです。
JavaScriptで表示、非表示を切り替えられるボタンをつけることができますが、不要であればCSSのみで作成する事ができます。
ビビットデザインを主としているサイトに合いそう。
フラクタルローダー
See the Pen Canvas Simple Circle Loader by Jack Rugile (@jackrugile) on CodePen.
jsを使用しているローダーです。
カラフルで可愛いです。暗めの配色をしたサイトに合いますね。
OuroboroCSSローダー
See the Pen CSS Loader by Geoffrey Crofte (@CreativeJuiz) on CodePen.
種類が豊富なローダー。
動きもユニークで面白いものが揃っています。
使いやすさも抜群です。
温度計をモチーフにしたローダー
See the Pen CSS astral loader by Hugo Giraudel (@HugoGiraudel) on CodePen.
CSSで作られたローダー。純粋にCSSだけで作れるのがすごい。
色もカラフルでオシャレ。
％カウンター付きローディングバー
See the Pen Loader by Nicolas Slatiner (@slatiner) on CodePen.
ローディング率が上部に表示されるローディングバー。
デザインもシンプルなのでどんなサイトにも合います。
また、ローディング率が表示される事で離脱率の軽減も可能とのこと。
一石二鳥なローディングバーです。
ライトのようなローディングバー
See the Pen Pure Css Loader by Just a random person (@mathdotrandom) on CodePen.
CSS3の代表ともいえるアニメーションローディングバー。
サイズやスピード、色などの微調整も可能です。
見た目もオシャレでわかりやすく、使いやすいローディングバーです。
Three.jsローダー
See the Pen Three.js Loader by Lennart Hase (@motorlatitude) on CodePen.
キューブが周り続けるローダー。
Three.jsの3Dライブラリを使用しているので立体感があり、見ていて飽きません。
Organic Circle
See the Pen Organic Circle Canvas Loader by Jack Rugile (@jackrugile) on CodePen.
潜水艦や飛行機で見るようなレーダーを彷彿とさせるローダー。
サイトを選びそうですが、中々ないデザインです。
シンプルサークルローダー
See the Pen Canvas infinite loader by MRU (@ruffiem) on CodePen.
短くシンプルな円形のローダー。
簡単かつ軽いjsを使用しているので、ページ速度の心配はいりません。
どんなサイトにも合うデザインです。
