元件
pinion-ui

Theme

Tune

Lang

Progress

daisyUI progress bar 包裝。value=null 為不確定 (動畫條紋)、value 指定為確定。顏色 × 尺寸 × showLabel (百分比 / 分數) 由屬性控制。無障礙已附加 role=progressbar + aria-valuenow / valuemin / valuemax。

value — 0 / 25 / 50 / 75 / 100 (max=100)

<x-progress :value="0" color="primary" />
<x-progress :value="25" color="primary" />
<x-progress :value="50" color="primary" />
<x-progress :value="75" color="primary" />
<x-progress :value="100" color="primary" />

<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 0%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 25%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 50%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 75%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 100%"></div>
</div>
</div>

自訂 max

<x-progress :value="7" :max="10" />

<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-neutral transition-[width] duration-300 ease-out" style="width: 70%"></div>
</div>
</div>

color — null (neutral grey, default) / primary / secondary / accent / info / success / warning / error / neutral

<x-progress :value="60" />
<x-progress :value="60" color="primary" />
<x-progress :value="60" color="secondary" />
<x-progress :value="60" color="accent" />
<x-progress :value="60" color="info" />
<x-progress :value="60" color="success" />
<x-progress :value="60" color="warning" />
<x-progress :value="60" color="error" />
<x-progress :value="60" color="neutral" />

<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-neutral transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-secondary transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-accent transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-info transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-success transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-warning transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-error transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-neutral transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>

size — xs / sm / md (default) / lg (height 透過 tailwind utility 表現,daisyUI 5 中沒有 progress-{size})

<x-progress :value="60" size="xs" color="primary" />
<x-progress :value="60" size="sm" color="primary" />
<x-progress :value="60" size="md" color="primary" />
<x-progress :value="60" size="lg" color="primary" />

<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-1">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-2">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-4">
<div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width: 60%"></div>
</div>
</div>

標籤 (顯示於右上角) — showLabel / labelFormat=fraction

42%
42 / 100
7 / 10
70%
<x-progress :value="42" color="info" showLabel />
<x-progress :value="42" color="info" showLabel labelFormat="fraction" />
<x-progress :value="7" :max="10" color="success" showLabel labelFormat="fraction" />
<x-progress :value="7" :max="10" color="success" showLabel />

<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100">
<div class="flex items-center justify-end text-xs text-base-content/60 tabular-nums">
        42%
    </div>
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-info transition-[width] duration-300 ease-out" style="width: 42%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100">
<div class="flex items-center justify-end text-xs text-base-content/60 tabular-nums">
        42 / 100
    </div>
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-info transition-[width] duration-300 ease-out" style="width: 42%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10">
<div class="flex items-center justify-end text-xs text-base-content/60 tabular-nums">
        7 / 10
    </div>
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-success transition-[width] duration-300 ease-out" style="width: 70%"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10">
<div class="flex items-center justify-end text-xs text-base-content/60 tabular-nums">
        70%
    </div>
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-success transition-[width] duration-300 ease-out" style="width: 70%"></div>
</div>
</div>

indeterminate (進度未知) — daisyUI 會顯示 animated stripe。省略 value 時效果相同

<x-progress :value="null" />
<x-progress :value="null" color="primary" />
<x-progress :value="null" color="success" size="lg" />
<x-progress :value="null" color="error" size="xs" />

<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-neutral w-1/3 animate-progress-indeterminate"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-3">
<div class="h-full rounded-full bg-primary w-1/3 animate-progress-indeterminate"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-4">
<div class="h-full rounded-full bg-success w-1/3 animate-progress-indeterminate"></div>
</div>
</div>
<div class="w-full flex flex-col gap-1" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="w-full bg-base-300 rounded-full overflow-hidden h-1">
<div class="h-full rounded-full bg-error w-1/3 animate-progress-indeterminate"></div>
</div>
</div>