ローディングアイコン デザイン見本
CSS の @keyframes アニメーションで作る3種類のローディングアイコンと、JavaScript でページ読み込み完了まで表示する制御方法をまとめた実装デモです。コピーしてすぐに使えるHTML・CSS・JSのコードを掲載しています。
① 回転する円 — border で一部だけ色を付けて回転
アニメーション: spin 1s linear infinite
<div class="container">
<div class="spinner"></div>
</div>.container {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 9999;
}
.spinner {
width: 60px;
height: 60px;
border: 6px solid rgba(0, 0, 0, 0.2);
border-top: 6px solid #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}border: 6px solid rgba(0,0,0,0.2) で薄いリング全体を作り、border-top だけを濃い色で上書きします。これを @keyframes spin で 0deg → 360deg に回転させることで、「一部が強調されたリングがぐるぐる回る」ローディングアイコンが完成します。ボタンで速度を切り替えるとコードも連動して更新されます。
② 複数のドットが拡大縮小 — animation-delay でリズムを作る
<div class="container">
<div class="spinner-2">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>.container {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 9999;
}
.spinner-2 {
display: flex;
gap: 20px;
}
.dot {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
animation: bounce 1.2s infinite ease-in-out;
}
.dot:nth-child(1) { animation-delay: -0.24s; }
.dot:nth-child(2) { animation-delay: -0.12s; }
.dot:nth-child(3) { animation-delay: 0; }
@keyframes bounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.5); }
}同じ @keyframes bounce を3つのドットに適用し、animation-delay を -0.24s / -0.12s / 0s とずらすことで、波打つようなリズミカルな動きになります。負の値を使うとアニメーションが途中から始まるため、ページ表示直後から動きが見え、「止まっている」印象を与えません。
③ 不定形プログレスバー — position + overflow で端をはみ出させる
<div class="indeterminate-bar-container">
<div class="indeterminate-bar"></div>
</div>.indeterminate-bar-container {
width: 100%;
height: 20px;
background-color: #f3f3f3;
overflow: hidden;
border-radius: 5px;
position: relative;
}
.indeterminate-bar {
width: 100%;
height: 100%;
background-color: #4caf50;
position: absolute;
animation: indeterminate 2s infinite;
}
@keyframes indeterminate {
0% { left: -50%; width: 50%; }
50% { left: 25%; width: 50%; }
100% { left: 100%; width: 50%; }
}外枠に position: relative; overflow: hidden を設定し、バー要素を position: absolute にします。@keyframes indeterminate でバーを左端の外側（left: -50%）から右端の外側（left: 100%）へ移動させます。外枠からはみ出た部分は overflow: hidden で隠れるため、終わりのない不定型なプログレスバーが完成します。
④ ページ読み込み完了まで表示する — window ‘load’ イベントで制御
ページコンテンツ
2 秒間のローディングが表示されます
<div class="container">
<div class="spinner"></div>
</div>
<main>
<!-- ページ本体のコンテンツ -->
</main>.container {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 9999;
}
body.loaded .container {
display: none;
}
.spinner {
width: 60px;
height: 60px;
border: 6px solid rgba(0, 0, 0, 0.2);
border-top: 6px solid #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}window.addEventListener('load', function() {
document.body.classList.add('loaded');
});window.addEventListener('load', ...) は画像・動画を含むすべてのリソースの読み込みが完了したタイミングで発火します。このタイミングで body に loaded クラスを付与し、CSSの body.loaded .container { display: none; } でローディングアイコンを隠します。ページが表示可能になった瞬間に自動で切り替わるため、処理の遅いページでの待機中のUXを改善できます。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
