Progress
daisyUI progress bar 包装器。value=null 为不确定（动画条纹），指定 value 为确定状态。通过 prop 控制颜色 × 尺寸 × showLabel（百分比 / 分数）。a11y 已附加 role=progressbar + aria-valuenow / valuemin / valuemax。
default no props — indeterminate (animated stripe), neutral grey, md
value — 0 / 25 / 50 / 75 / 100 (max=100)
0
25
50
75
100
color variants — default (null = neutral grey) / primary / secondary / accent / info / success / warning / error / neutral
default
primary
secondary
accent
info
success
warning
error
neutral
size variants — xs / sm / md / lg (height は tailwind utility で表現、daisyUI 5 に progress-{size} は無い)
xs
sm
md
lg
showLabel — percent (default) / fraction
42%
42 / 100
7 / 10
70%
indeterminate — value=null (animated stripe, aria-valuenow 省略)
使い方
{{-- determinate (value=0-100, max=100) --}}
<x-progress :value="60" />
{{-- カスタム max --}}
<x-progress :value="7" :max="10" />
{{-- color (null=neutral grey) --}}
<x-progress :value="60" color="primary" />
<x-progress :value="60" color="success" />
{{-- size: xs / sm / md (default) / lg --}}
<x-progress :value="60" size="lg" />
{{-- ラベル (右上に表示) --}}
<x-progress :value="42" showLabel /> {{-- "42%" --}}
<x-progress :value="7" :max="10" showLabel labelFormat="fraction" /> {{-- "7 / 10" --}}
{{-- indeterminate (進捗不明) — daisyUI が animated stripe を出す --}}
<x-progress :value="null" />
<x-progress /> {{-- value 省略でも同じ --}}