会員登録の手順や、アンケートの進み具合、目標までの達成率など、「今どのくらい進んでいるか」を見せたい場面はよくあります。
この記事では、コピペするだけで使えるプログレスバー（進捗バー）を20個まとめました。
シンプルな横棒から、円形・ステップ表示・支援額の達成率まで、場面ごとに使い分けられる種類を用意しています。
ボタン・カード・バッジの記事と同じく、HTMLとCSSを分けて掲載しています。
バーの長さって、どうやって変えるの？
HTMLの中の「width:60%」みたいな数字を書き換えるだけなんだ。使い方を先に説明するから、そのあとは気になるデザインから見てね。
使い方｜HTMLとCSSをそれぞれ貼り付ける
CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、プログレスバーを表示したい場所に貼り付けます。
進み具合は、HTMLコード内の「width:〇〇%」の数字で変えられます。
09番の円形タイプは「–p:〇〇」の数字、16番の縦向きタイプは「height:〇〇%」の数字を書き換えてください。
01. シンプルな細いバー
もっとも定番の、進み具合を示す細いバーです。
実際の見た目
HTMLコード
<div class="kts-prog01"><div class="kts-prog01-bar" style="width:60%"></div></div>CSSコード
.kts-prog01 { width: 100%; height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; }
.kts-prog01-bar { height: 100%; background: #3B82F6; }02. パーセント表示入りのバー
バーの中に数字を入れて、進み具合をはっきり伝えるタイプです。
実際の見た目
HTMLコード
<div class="kts-prog02"><div class="kts-prog02-bar" style="width:75%">75%</div></div>CSSコード
.kts-prog02 { width: 100%; height: 24px; background: #E5E7EB; border-radius: 12px; overflow: hidden; font-family:sans-serif; }
.kts-prog02-bar { height: 100%; background: #10B981; color: #fff; font-size: 12px; font-weight: 700; line-height: 24px; text-align: right; padding-right: 10px; box-sizing: border-box; }03. 項目名と数値が上に付くバー
「何の進み具合か」と数値をバーの上に並べる、説明しやすいタイプです。
実際の見た目
資料作成40%
HTMLコード
<div class="kts-prog03"><div class="kts-prog03-head"><span>資料作成</span><span>40%</span></div><div class="kts-prog03-track"><div class="kts-prog03-bar" style="width:40%"></div></div></div>CSSコード
.kts-prog03 { width: 100%; font-family:sans-serif; }
.kts-prog03-head { display: flex; justify-content: space-between; font-size: 14px; color: #374151; margin-bottom: 6px; }
.kts-prog03-track { height: 10px; background: #F3F4F6; border-radius: 5px; overflow: hidden; }
.kts-prog03-bar { height: 100%; background: #F59E0B; border-radius: 5px; }04. グラデーションのバー
色が滑らかに変わる、やわらかい印象のバーです。
実際の見た目
HTMLコード
<div class="kts-prog04"><div class="kts-prog04-bar" style="width:70%"></div></div>CSSコード
.kts-prog04 { width: 100%; height: 14px; background: #EEF2FF; border-radius: 7px; overflow: hidden; }
.kts-prog04-bar { height: 100%; background: linear-gradient(90deg, #818CF8, #EC4899); border-radius: 7px; }05. ストライプ模様のバー
斜めの縞模様で、作業中らしさを出したい時に使えるタイプです。
実際の見た目
HTMLコード
<div class="kts-prog05"><div class="kts-prog05-bar" style="width:55%"></div></div>CSSコード
.kts-prog05 { width: 100%; height: 18px; background: #E5E7EB; border-radius: 9px; overflow: hidden; }
.kts-prog05-bar { height: 100%; background-color: #0EA5E9; background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%); background-size: 20px 20px; }06. 縞模様が動くバー
05番の縞模様が流れるように動く、処理中を表すタイプです。
実際の見た目
HTMLコード
<div class="kts-prog06"><div class="kts-prog06-bar" style="width:65%"></div></div>CSSコード
.kts-prog06 { width: 100%; height: 18px; background: #E5E7EB; border-radius: 9px; overflow: hidden; }
.kts-prog06-bar { height: 100%; background-color: #8B5CF6; background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%); background-size: 20px 20px; animation: kts-prog06-move 1s linear infinite; }
@keyframes kts-prog06-move { from { background-position: 0 0; } to { background-position: 20px 0; } }07. 区切りのあるセグメント型
「5段階中3段階まで完了」のように、区切りで進み具合を見せるタイプです。
実際の見た目
HTMLコード
<div class="kts-prog07"><span class="on"></span><span class="on"></span><span class="on"></span><span></span><span></span></div>CSSコード
.kts-prog07 { display: flex; gap: 6px; width: 100%; }
.kts-prog07 span { flex: 1; height: 10px; background: #E5E7EB; border-radius: 3px; }
.kts-prog07 span.on { background: #22C55E; }08. 番号付きのステップ表示
申込み→確認→完了のように、手順の現在地を示すタイプです。
実際の見た目
入力
確認
完了
HTMLコード
<div class="kts-prog08"><div class="done">入力</div><div class="now">確認</div><div>完了</div></div>CSSコード
.kts-prog08 { display: flex; padding: 0; margin: 0; counter-reset: kts-prog08; font-family:sans-serif; }
.kts-prog08 > div { flex: 1; position: relative; text-align: center; font-size: 13px; color: #9CA3AF; counter-increment: kts-prog08; }
.kts-prog08 > div::before { content: counter(kts-prog08); display: block; width: 30px; height: 30px; line-height: 30px; margin: 0 auto 6px; border-radius: 50%; background: #E5E7EB; color: #6B7280; font-weight: 700; position: relative; z-index: 1; }
.kts-prog08 > div::after { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: #E5E7EB; }
.kts-prog08 > div:first-child::after { display: none; }
.kts-prog08 > div.done, .kts-prog08 > div.now { color: #2563EB; font-weight: 700; }
.kts-prog08 > div.done::before, .kts-prog08 > div.now::before { background: #2563EB; color: #fff; }
.kts-prog08 > div.done::after, .kts-prog08 > div.now::after { background: #2563EB; }09. 円形のプログレス
ドーナツ型の円で進み具合を見せるタイプです。数値は –p の値で変えられます。
実際の見た目
68%
HTMLコード
<div class="kts-prog09" style="--p:68"><span>68%</span></div>CSSコード
.kts-prog09 { --p: 50; width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(#F97316 calc(var(--p) * 1%), #FDE7D6 0); display: flex; align-items: center; justify-content: center; font-family:sans-serif; }
.kts-prog09 span { width: 84px; height: 84px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #F97316; }10. 目標ライン付きのバー
目標の位置に線を引いて、あとどれくらいかを伝えるタイプです。
実際の見た目
目標
HTMLコード
<div class="kts-prog10"><div class="kts-prog10-bar" style="width:62%"></div><div class="kts-prog10-goal" style="left:80%"><span>目標</span></div></div>CSSコード
.kts-prog10 { position: relative; width: 100%; height: 14px; background: #E5E7EB; border-radius: 7px; margin-top: 26px; font-family:sans-serif; }
.kts-prog10-bar { height: 100%; background: #14B8A6; border-radius: 7px; }
.kts-prog10-goal { position: absolute; top: -6px; width: 2px; height: 26px; background: #DC2626; }
.kts-prog10-goal span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #DC2626; font-weight: 700; white-space: nowrap; }11. 吹き出しで数値を示すバー
バーの先端に吹き出しを付けて、数値を目立たせるタイプです。
実際の見た目
HTMLコード
<div class="kts-prog11"><div class="kts-prog11-bar" style="width:45%"><span>45%</span></div></div>CSSコード
.kts-prog11 { width: 100%; height: 10px; background: #E5E7EB; border-radius: 5px; margin-top: 34px; font-family:sans-serif; }
.kts-prog11-bar { position: relative; height: 100%; background: #6366F1; border-radius: 5px; }
.kts-prog11-bar span { position: absolute; right: 0; top: -32px; transform: translateX(50%); background: #6366F1; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.kts-prog11-bar span::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 0; border-top-color: #6366F1; }12. 読み込み中のバー
終わりが決まっていない処理で使う、左右に流れ続けるタイプです。
実際の見た目
HTMLコード
<div class="kts-prog12"><div class="kts-prog12-bar"></div></div>CSSコード
.kts-prog12 { position: relative; width: 100%; height: 6px; background: #DBEAFE; border-radius: 3px; overflow: hidden; }
.kts-prog12-bar { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: #2563EB; border-radius: 3px; animation: kts-prog12-slide 1.4s ease-in-out infinite; }
@keyframes kts-prog12-slide { from { left: -40%; } to { left: 100%; } }13. スキル表示用の複数バー
プロフィールやスタッフ紹介で、得意なことを並べて見せるタイプです。
実際の見た目
接客90%
資料作成70%
デザイン50%
HTMLコード
<div class="kts-prog13">
<p>接客<span>90%</span></p><div class="kts-prog13-track"><div style="width:90%"></div></div>
<p>資料作成<span>70%</span></p><div class="kts-prog13-track"><div style="width:70%"></div></div>
<p>デザイン<span>50%</span></p><div class="kts-prog13-track"><div style="width:50%"></div></div>
</div>CSSコード
.kts-prog13 { width: 100%; font-family:sans-serif; }
.kts-prog13 p { display: flex; justify-content: space-between; margin: 10px 0 4px; font-size: 14px; color: #1F2937; }
.kts-prog13 p span { color: #6B7280; }
.kts-prog13-track { height: 8px; background: #F3F4F6; border-radius: 4px; overflow: hidden; }
.kts-prog13-track div { height: 100%; background: #0F766E; }14. 残りわずかを知らせるバー
在庫や定員の残りが少ないことを、赤系の色で伝えるタイプです。
実際の見た目
残り3席です
HTMLコード
<div class="kts-prog14"><p>残り<strong>3席</strong>です</p><div class="kts-prog14-track"><div style="width:15%"></div></div></div>CSSコード
.kts-prog14 { width: 100%; padding: 12px 14px; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; box-sizing: border-box; font-family:sans-serif; }
.kts-prog14 p { margin: 0 0 8px; font-size: 14px; color: #991B1B; }
.kts-prog14 strong { font-size: 18px; }
.kts-prog14-track { height: 8px; background: #FECACA; border-radius: 4px; overflow: hidden; }
.kts-prog14-track div { height: 100%; background: #DC2626; }15. 支援額・達成率を見せるバー
クラウドファンディングや募金のように、金額と達成率をまとめて見せるタイプです。
実際の見た目
¥820,000目標 ¥1,000,000
達成率 82%残り12日
HTMLコード
<div class="kts-prog15"><div class="kts-prog15-num"><strong>¥820,000</strong><span>目標 ¥1,000,000</span></div><div class="kts-prog15-track"><div style="width:82%"></div></div><div class="kts-prog15-foot"><span>達成率 82%</span><span>残り12日</span></div></div>CSSコード
.kts-prog15 { width: 100%; padding: 16px; border: 1px solid #E5E7EB; border-radius: 10px; box-sizing: border-box; font-family:sans-serif; }
.kts-prog15-num { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.kts-prog15-num strong { font-size: 22px; color: #111827; }
.kts-prog15-num span { font-size: 12px; color: #6B7280; }
.kts-prog15-track { height: 10px; background: #F3F4F6; border-radius: 5px; overflow: hidden; }
.kts-prog15-track div { height: 100%; background: #E11D48; }
.kts-prog15-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: #E11D48; font-weight: 700; }16. 縦向きのバー
棒グラフのように、縦に並べて比べるタイプです。
実際の見た目
4月
5月
6月
HTMLコード
<div class="kts-prog16"><div><span style="height:40%"></span><p>4月</p></div><div><span style="height:65%"></span><p>5月</p></div><div><span style="height:90%"></span><p>6月</p></div></div>CSSコード
.kts-prog16 { display: flex; gap: 20px; align-items: flex-end; height: 140px; font-family:sans-serif; }
.kts-prog16 div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; width: 36px; }
.kts-prog16 span { display: block; width: 100%; background: linear-gradient(180deg, #60A5FA, #1D4ED8); border-radius: 6px 6px 0 0; }
.kts-prog16 p { margin: 6px 0 0; font-size: 12px; color: #4B5563; }17. 光るネオン風のバー
暗い背景の中で光る、ゲーム画面のような印象のバーです。
実際の見た目
HTMLコード
<div class="kts-prog17"><div class="kts-prog17-track"><div style="width:72%"></div></div></div>CSSコード
.kts-prog17 { padding: 18px; background: #0F172A; border-radius: 10px; }
.kts-prog17-track { height: 10px; background: #1E293B; border-radius: 5px; }
.kts-prog17-track div { height: 100%; background: #22D3EE; border-radius: 5px; box-shadow: 0 0 8px #22D3EE, 0 0 16px #22D3EE; }18. 丸いドットで見せる進み具合
●●●○○のように、ドットの数で段階を示すタイプです。
実際の見た目
3 / 5
HTMLコード
<div class="kts-prog18"><span class="on"></span><span class="on"></span><span class="on"></span><span></span><span></span><em>3 / 5</em></div>CSSコード
.kts-prog18 { display: flex; align-items: center; gap: 8px; font-family:sans-serif; }
.kts-prog18 span { width: 14px; height: 14px; border-radius: 50%; background: #E5E7EB; }
.kts-prog18 span.on { background: #EAB308; }
.kts-prog18 em { font-style: normal; font-size: 13px; color: #6B7280; margin-left: 4px; }19. アンケート結果を見せるバー
選択肢ごとの回答の割合を、バーの長さで比べるタイプです。
実際の見た目
ランチ会52%
オンライン31%
参加しない17%
HTMLコード
<div class="kts-prog19">
<div class="kts-prog19-row"><div style="width:52%"></div><p>ランチ会<span>52%</span></p></div>
<div class="kts-prog19-row"><div style="width:31%"></div><p>オンライン<span>31%</span></p></div>
<div class="kts-prog19-row"><div style="width:17%"></div><p>参加しない<span>17%</span></p></div>
</div>CSSコード
.kts-prog19 { width: 100%; font-family:sans-serif; }
.kts-prog19-row { position: relative; height: 36px; margin-bottom: 8px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; overflow: hidden; }
.kts-prog19-row div { position: absolute; top: 0; left: 0; height: 100%; background: #DDD6FE; }
.kts-prog19-row p { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0 12px; line-height: 36px; font-size: 14px; color: #1F2937; }
.kts-prog19-row p span { font-weight: 700; color: #6D28D9; }20. レトロな枠線のバー
太い枠線とブロックの目盛りで、手作り感のあるレトロなバーです。
実際の見た目
HTMLコード
<div class="kts-prog20"><div class="kts-prog20-bar" style="width:60%"></div></div>CSSコード
.kts-prog20 { width: 100%; height: 24px; padding: 3px; border: 3px solid #1F2937; background: #FFFBEB; box-sizing: border-box; }
.kts-prog20-bar { height: 100%; background: repeating-linear-gradient(90deg, #1F2937 0 12px, transparent 12px 16px); }カスタマイズの小ワザ
- 進み具合は、HTMLコード内のwidth（09番は–p、16番はheight）の数字を書き換えてください。
- 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。完了は緑、注意は赤のように、色の意味を揃えると直感的に伝わります。
- 06番と12番の動きは、CSSのアニメーションのみで動作します。1ページにたくさん並べると落ち着かないので、使うのは1〜2か所までがおすすめです。
- 08番のステップ表示は、li要素を増やすと段階を増やせます。完了した段階にはclass=”done”、今の段階にはclass=”now”を付けてください。
- 数値の文字（75%など）もHTML内に書かれているので、バーの長さと一緒に書き換えるのを忘れないようにしましょう。
まとめ｜早見表
| 見せたいこと | 該当するプログレスバー |
|---|---|
| シンプルな進み具合 | 01, 02, 03, 04 |
| 作業中・読み込み中 | 05, 06, 12 |
| 手順・段階 | 07, 08, 18 |
| 達成率・目標 | 09, 10, 11, 15 |
| 複数の項目を比べる | 13, 16, 19 |
| 残りわずかの注意 | 14 |
| 雰囲気を出したい | 17, 20 |
バーがあるだけで、「あとちょっと！」って気持ちになるね！
そうなんだ。フォームの手順や目標の達成率を見せると、最後まで進んでもらいやすくなるよ。数字の書き換え忘れにだけ気をつけて使ってみてね。
20個のプログレスバーは、進み具合・手順・達成率・比較など、見せたい内容に応じて使い分けられる。進み具合はwidthなどの数値で変更でき、表示する数値の文字もあわせて書き換える。
