📖 解説を見る

📊 プログレスバーってなに？

「読よみ込こみ中…」や「完了かんりょう〇〇%」を表あらわすUIです。CSSで作つくれます！

✏️ 作つくり方かた：
<div class="bar-bg">
  <div class="bar" style="width:70%"></div>
</div>

.bar-bg { background: #e2e8f0; border-radius: 99px; }
.bar { background: #6366f1; height: 20px; border-radius: 99px; }

⚠️ ポイント：
・外側そとがわ（.bar-bg）が背景はいけいのトラック
・内側うちがわ（.bar）が塗ぬられた部分ぶぶん

ヒントを見る

.bar の width を 70% にしよう！