Progress Bar（プログレスバー） — CSS+JS · AIプロンプト付き

CODE

HTML

<div class="demo-stage"><div class="pb-wrap"><div class="pb-track"><div class="pb-fill" id="pbFill"></div></div><div class="pb-label" id="pbLabel">0%</div><button class="pb-btn" onclick="runProgress()">START</button></div></div>

CSS

.pb-wrap { padding:2rem; max-width:480px; margin:0 auto; }
.pb-track { width:100%; height:8px; background:#E5E5E5; border-radius:4px; overflow:hidden; }
.pb-fill { width:0%; height:100%; background:linear-gradient(90deg,#E91B89 0%,#FF6BB9 100%); border-radius:4px; transition:width .3s ease; }
.pb-label { text-align:center; margin-top:1rem; font-family:'Oswald',sans-serif; font-size:2rem; color:#1A1A1A; }
.pb-btn { display:block; margin:1rem auto 0; padding:.8rem 2rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; cursor:pointer; }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .pb-fill {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

function runProgress(){ const fill = document.getElementById('pbFill'); const label = document.getElementById('pbLabel'); let p = 0; fill.style.width = '0%'; label.textContent = '0%'; const iv = setInterval(() => { p += Math.random() * 8 + 2; if(p >= 100){ p = 100; clearInterval(iv); } fill.style.width = p + '%'; label.textContent = Math.round(p) + '%'; }, 200); }

AI PROMPT

Claude Code Cursor v0

PROMPT

プログレスバーをCSS+JSで実装して。track（背景#E5E5E5・height 8px・border-radius 4px）の上にfill（linear-gradient #E91B89→#FF6BB9・width:transition .3s ease）。setIntervalで200msごとに +2〜10%増加、100%到達でclear。ラベルでパーセント表示。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

プログレスバー（Progress Bar）とは

読込進捗を視覚化するプログレスバー。ローディング画面・フォーム送信・データ取得時のUX改善に。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。

FAQ

プログレスバー（Progress Bar）はどんな効果ですか？

読込進捗を視覚化するプログレスバー。ローディング画面・フォーム送信・データ取得時のUX改善に。データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く演出です。

Progress BarはCSSだけで実装できますか？

見た目はCSSで作れますが、動きの制御にJavaScriptを併用します。本ページではHTML・CSS・JavaScriptのコードをまとめて掲載しています。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Progress Bar

RELATED EFFECTS

プログレスバー（Progress Bar）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ