Tailwind CSS Progress Components
Color variants
Default
html
<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
html
<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
html
<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>