新着
プログレスLinear Progress With Label
A labelled horizontal progress bar with a live percentage readout above the track.
#progress#linear#bar
3 個のフレームワーク初級
Loading…
A discrete progress track split into equal pill segments that fill left to right.
<!--
The row of pills is decorative; the real range still rides on the wrapper's
aria-valuenow. The segments only round the value to the nearest notch, so the
numeric % stays authoritative.
-->
<div class="w-full">
<div class="mb-1.5 flex items-center justify-between gap-3">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Profile strength</span>
<span class="text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">70%</span>
</div>
<div
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Profile strength"
class="flex w-full gap-1"
>
<span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
<span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
<span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
<span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
<span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
<span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
<span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
<span class="h-2.5 flex-1 rounded-full bg-gray-200 dark:bg-gray-800"></span>
<span class="h-2.5 flex-1 rounded-full bg-gray-200 dark:bg-gray-800"></span>
<span class="h-2.5 flex-1 rounded-full bg-gray-200 dark:bg-gray-800"></span>
</div>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
value必須 | number | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
label | string | 'Progress' | 読み込み中に読み上げられるアクセシブルなラベル。 |
segments | number | 10 | Segments |
min | number | 0 | Min |
max | number | 100 | Max |
className | string | - | ルート要素にマージされる追加クラス。 |
Set the notch count with `segments`; the value rounds to the nearest segment while `aria-valuenow` keeps the true number. The pills stay decorative, so screen readers hear the percentage, not the geometry.