新着
プログレスLinear Progress With Label
A labelled horizontal progress bar with a live percentage readout above the track.
#progress#linear#bar
3 個のフレームワーク初級
Loading…
An SVG ring that fills from the top with a bold percentage in its centre.
<!--
The SVG is rotated -90deg so the ring fills from 12 o'clock, and both circles
are aria-hidden: the *value* is announced by the numeric %, not by the geometry.
strokeDashoffset is the whole trick - dasharray is the full circumference and
the offset hides the unfilled remainder (here r=59, C=370.7, 72% -> 103.8).
-->
<div class="inline-flex flex-col items-center gap-2">
<div
role="progressbar"
aria-valuenow="72"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Storage used"
class="relative"
style="width: 128px; height: 128px"
>
<svg width="128" height="128" viewBox="0 0 128 128" class="-rotate-90" aria-hidden="true">
<circle cx="64" cy="64" r="59" fill="none" stroke-width="10" class="stroke-gray-200 dark:stroke-gray-800" />
<circle
cx="64" cy="64" r="59" fill="none" stroke-width="10" stroke-linecap="round"
stroke-dasharray="370.7" stroke-dashoffset="103.8"
class="stroke-blue-600 transition-[stroke-dashoffset] duration-500 ease-out motion-reduce:transition-none dark:stroke-blue-500"
/>
</svg>
<span class="absolute inset-0 flex items-center justify-center text-2xl font-bold tabular-nums text-gray-900 dark:text-gray-100">72%</span>
</div>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">Storage used</span>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
value必須 | number | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
label | string | 'Progress' | 読み込み中に読み上げられるアクセシブルなラベル。 |
min | number | 0 | Min |
max | number | 100 | Max |
size | number | 128 | Size |
strokeWidth | number | 10 | Stroke width |
The ring is driven by `stroke-dashoffset` over the circumference, and both circles are `aria-hidden` because the centred `%` is the real readout. Resize with `size` and `strokeWidth`, or recolour via the `stroke-blue-600` class.