Web Design Facts

WEBデザインに関する内容(フォントやベクター画像、フォトショアクション、モックアップなど)をまとめています。

Web Design Facts

Web Design Facts

コピペで簡単!CSSとJavaScriptで作られた動くオシャレで綺麗なローディング画面アニメーション10選!【ロード画面/画像を使わない】

f:id:mamegoro:20180608170140j:plain


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を使用しているので、ページ速度の心配はいりません。
どんなサイトにも合うデザインです。

PAGE TOP