Progress Bar

DEMO

CODE

<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>

.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; }

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

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

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。