Progress Component An accessible progress bar component built with native HTML progress elements and Tailwind CSS. Visualize task completion, loading states, and step progression with animated fills. Supports multiple sizes and color variants for clear, accessible progress feedback in any UI.
Color variants Default
Copy Code
<progress class="progress w-56" value="0" max="100"></progress>
<progress class="progress w-56" value="25" max="100"></progress>
<progress class="progress w-56" value="50" max="100"></progress>
<progress class="progress w-56" value="75" max="100"></progress>
<progress class="progress w-56" value="100" max="100"></progress>Primary
Copy Code
<progress class="progress progress-primary w-56" value="0" max="100"></progress>
<progress class="progress progress-primary w-56" value="25" max="100"></progress>
<progress class="progress progress-primary w-56" value="50" max="100"></progress>
<progress class="progress progress-primary w-56" value="75" max="100"></progress>
<progress class="progress progress-primary w-56" value="100" max="100"></progress>Secondary
Copy Code
<progress class="progress progress-secondary w-56" value="0" max="100"></progress>
<progress class="progress progress-secondary w-56" value="25" max="100"></progress>
<progress class="progress progress-secondary w-56" value="50" max="100"></progress>
<progress class="progress progress-secondary w-56" value="75" max="100"></progress>
<progress class="progress progress-secondary w-56" value="100" max="100"></progress>