Pinion UI — Progress

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>

Custom 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 is expressed via a Tailwind utility — daisyUI 5 has no 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>

Label (shown top-right) — 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 (progress unknown) — daisyUI shows an animated stripe. Same result if value is omitted

<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>