新着
プログレスLinear Progress With Label
A labelled horizontal progress bar with a live percentage readout above the track.
#progress#linear#bar
3 個のフレームワーク初級
Loading…
A semicircular gauge with a large numeral, built from one SVG arc drawn twice.
<!--
The gauge is one SVG arc drawn twice. pathLength="100" re-scales the path to a
0-100 length regardless of its real geometry, so the value arc is just
stroke-dasharray="<pct> 100" - no trigonometry. The arc is aria-hidden; the big
numeral is the readout, and aria-valuenow on the wrapper is the source of truth.
-->
<div
role="progressbar"
aria-valuenow="68"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Performance score"
class="relative inline-block w-full max-w-[240px]"
>
<svg viewBox="0 0 200 110" class="w-full" aria-hidden="true">
<path d="M 20 100 A 80 80 0 0 1 180 100" fill="none" stroke-width="16" stroke-linecap="round" pathLength="100" class="stroke-gray-200 dark:stroke-gray-800" />
<path d="M 20 100 A 80 80 0 0 1 180 100" fill="none" stroke-width="16" stroke-linecap="round" pathLength="100" stroke-dasharray="68 100" class="stroke-indigo-600 transition-[stroke-dasharray] duration-500 ease-out motion-reduce:transition-none dark:stroke-indigo-500" />
</svg>
<div class="absolute inset-x-0 bottom-0 flex flex-col items-center">
<span class="text-3xl font-bold tabular-nums text-gray-900 dark:text-gray-100">68</span>
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Performance score</span>
</div>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
value必須 | number | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
label | string | 'Score' | 読み込み中に読み上げられるアクセシブルなラベル。 |
min | number | 0 | Min |
max | number | 100 | Max |
unit | string | '' | Unit |
className | string | - | ルート要素にマージされる追加クラス。 |
`pathLength={100}` normalises the arc so the value stroke is simply `strokeDasharray="<pct> 100"` - no trigonometry. The arc is `aria-hidden`; the numeral and the wrapper `aria-valuenow` carry the value. Set a `unit` like `%` or ` pts`.