Kaiko UI Kaiko UI

Progress

Stable

A progress bar component for showing completion status and loading states based on DaisyUI.

API Reference

Attribute Description Type Default
variant Progress display type string "linear"
value Completion percentage (0–100). Omit for indeterminate state. number "0"
max Maximum value for linear progress number 100
color Progress bar color theme string ""
size Diameter of the radial progress circle (radial only); CSS size value e.g. 5rem string ""
thickness Thickness of the radial progress track (radial only); CSS value e.g. 4px string ""
bg Background color with automatic text contrast (radial only) string ""
border Adds a 4px colored border around radial progress (radial only) string ""

variant

linear radial

color

neutral primary secondary accent info success warning error

Accessibility

Radial progress: automatically includes role="progressbar" and aria-valuenow. Always provide a visible label so the purpose is clear.

Linear progress: the native <progress> element provides implicit ARIA progressbar semantics. Pair with a visible label for meaningful tasks.

Indeterminate state: add aria-label="Loading..." or wrap with a live region (aria-live="polite") to announce progress changes to screen readers.

Examples

Usage 


<c-progress value="50" class="w-56">50%</c-progress>

Basic Progress

0% 25% 50% 75% 100% 
<c-progress value="0" class="w-56">0%</c-progress>
<c-progress value="50" class="w-56">50%</c-progress>
<c-progress value="100" class="w-56">100%</c-progress>

Colors

Default Neutral Primary Secondary Accent Info Success Warning Error 
<c-progress value="70" color="primary" class="w-56">Primary</c-progress>
<c-progress value="70" color="success" class="w-56">Success</c-progress>
<c-progress value="70" color="error" class="w-56">Error</c-progress>

Indeterminate Progress

Loading... Loading primary... Loading success... 
<!-- Omit value for indeterminate animation -->
<c-progress color="primary" class="w-56">Loading...</c-progress>

Radial Progress

0%
25%
50%
75%
100% 
<c-progress variant="radial" value="75">75%</c-progress>

Radial Background & Border

With Background Colors

70%
85%
60%
90%
45%
75%

With Borders

70%
85%
60%
90%

Combined Background & Border

70%
85%
60% 
<c-progress variant="radial" value="70" bg="primary">70%</c-progress>
<c-progress variant="radial" value="85" border="secondary">85%</c-progress>
<c-progress variant="radial" value="60" bg="accent" border="accent">60%</c-progress>

Radial Sizes & Thickness

Different Sizes

Small
Medium
Large

Different Thickness

Thin
Default
Thick 
<c-progress variant="radial" value="80" size="8rem">Large</c-progress>
<c-progress variant="radial" value="65" thickness="1rem">Thick</c-progress>

Real-world Examples

File Upload

document.pdf 84%

Dashboard Stats

92%
Storage Used
4.6 GB of 5 GB
67%
CPU Usage
67% average
45%
Project Complete
9 of 20 tasks 
<div class="flex flex-col gap-2">
  <div class="flex justify-between text-sm">
    <span>document.pdf</span>
    <span>84%</span>
  </div>
  <c-progress value="84" color="info" class="w-full"></c-progress>
</div>

Alpine.js Usage

Linear Progress

Simulation Progress

Radial Progress 

<div x-data='{ progress: 0, interval: null }'>
  <c-button @click="start()" color="primary">Start Progress</c-button>
  <c-button @click="reset()" color="secondary">Reset</c-button>
  <!-- Linear: use ::value binding -->
  <c-progress ::value="progress" color="success" class="w-full"></c-progress>
  <!-- Radial: use ::style for CSS custom property -->
  <c-progress variant="radial" ::style="`--value: ${progress}`" color="primary"></c-progress>
</div>