[CSSコピペ] ローディング(Loading…)アニメ実装方法+デザインスニペット15選。

初心者でもコピー&ペーストで実装できるpure cssサンプル。ローディング(Loading…)画面の表示方法。

画面表示時や登録処理時のローディング(Loading…)アニメーションは、エンドユーザーに処理中であることを知らせるためにも重要です。特に最近は凝ったデザインのローディング画面を見かけることも増えました。

本記事ではローディング(Loading…)アニメーションのデザインサンプルを紹介・解説します。通常のhtmlウェブサイト・WordPressなど幅広く利用いただけると思います。

 

まずは実際に動作するサンプルを載せます。

説明のためローディングも入力フォームもシンプルなものにしていますのでご容赦ください。入力フォームの上に被せられたローディングのdivによって、しっかりと入力欄が保護されていることがわかるかと思います。

ローディング画面の実装はこのように上に被せるdivタグなどを事前に用意しておいて、必要に応じてjQueryなどで表示・非表示を切り替える処理を実装することが基本となります。

See the Pen
css loading sample
by KodoCode (@KodoCode)
on CodePen.

 

なお、クルクル回るサークル(スピナー)はこちらを参考にしています。他にも様々なデザインを載せることができますので、記事の後半で紹介します。

See the Pen
Simple CSS Loading
by Stix (@stix)
on CodePen.

 

シンプルなローディング(Loading…)デザインのCSS/HTMLサンプルソースコード。コピペOK。

早速、ソースコードを掲載します。コピペしてご利用ください。

CSSソースコード ※ダブルクリックでコピペできます

 

HTMLソースコード ※ダブルクリックでコピペできます

 

.loadingのCSSにてwidth、height、top、leftなどを編集することで、ローディングアニメーションの表示位置を調整できます。全画面表示の場合は100%にすればOKです。

 

簡単にするためにシンプルなhtml/CSSを掲載しましたが、これだけではあまりにもシンプルすぎるかと思います。

次の項ではローディング画面のデザインサンプルを紹介します。シンプルなCSSでも高い表現力のある力作を集めましたので参考にしてください。

 

シンプルなローディングアニメーション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.

ネコが回ってます(笑)

とても可愛いですね。ネコは伸びますからね(笑)

 

以上となります。

ローディングは画面上に長く表示されるものではありませんが、やはり美しいデザインだと読み込みを待つのも苦になりません。

是非、サンプルを参考にして実装してみてください。

 

 

2021年5月11日DesignCSS,初心者向け

Posted by KodoCode