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

2024年12月9日

Contents

1. 初心者でもコピー＆ペーストで実装できるpure cssサンプル。ローディング(Loading…)画面の表示方法。
2. シンプルなローディング(Loading…)デザインのCSS/HTMLサンプルソースコード。コピペOK。
3. シンプルなローディングアニメーション5選。実用性が高い。
4. カッコいいローディングアニメーション10選。スタイリッシュ！面白い！

初心者でもコピー＆ペーストで実装できる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ソースコード　※ダブルクリックでコピペできます

.loading {
  background-color: black;
  opacity: 0.6;
  position: absolute;
  width: 400px;
  height: 200px;
  top: 0px;
  left: 0px;
}

.circle{
  width:100px;
  height:100px;
  border-radius:150px;
  border:15px solid #fff;
  border-top-color:rgba(0,0,0,0.3);
  box-sizing:border-box;
  position:absolute;
  top:20%;
  left:35%;
  animation:circle 1s linear infinite;
  -webkit-animation:circle 1s linear infinite;
}
@keyframes circle{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@-webkit-keyframes circle{
  0%{-webkit-transform:rotate(0deg)}
  100%{-webkit-transform:rotate(360deg)}
}

.loading{

background-color:black;

opacity:0.6;

position:absolute;

width:400px;

height:200px;

top:0px;

left:0px;

}

.circle{

width:100px;

height:100px;

border-radius:150px;

border:15pxsolid#fff;

border-top-color:rgba(0,0,0,0.3);

box-sizing:border-box;

position:absolute;

top:20%;

left:35%;

animation:circle1slinear infinite;

-webkit-animation:circle1slinear infinite;

}

@keyframescircle{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}

@-webkit-keyframescircle{

0%{-webkit-transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg)}

}

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Loading CSS sample</title>
  <link rel="stylesheet" href="design-css-loading.css">
</head>
<body>
  <h1>Loading CSS sample</h1>
  <p>ユーザID：<input type="text" name="id"></p>
  <p>パスワード：<input type="text" name="pass"></p>
  <p><button type="button">ボタン</button></p>
  <p></p>
  <h1>Loading CSS sample</h1>
  <p>ユーザID：<input type="text" name="id"></p>
  <p>パスワード：<input type="text" name="pass"></p>
  <p><button type="button">ボタン</button></p>
  <div id="loading" class="loading">
    <div class="circle"></div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Loading CSS sample</title>

</head>

<body>

<h1>Loading CSS sample</h1>

<p>ユーザID：<input type="text"name="id"></p>

<p>パスワード：<input type="text"name="pass"></p>

<p></p>

<h1>Loading CSS sample</h1>

<p>ユーザID：<input type="text"name="id"></p>

<p>パスワード：<input type="text"name="pass"></p>

</div>

</body>

</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日2024年12月9日DesignCSS,初心者向け

Posted by KodoCode