Tailwind CSS Progress - Versoly UI

Added in 1.0

Examples

Default

primary

secondary

tertiary

success

info

warning

danger

<div class="col">
  <p>Default</p>
  <div class="progress">
    <div class="progress-bar bg-gray-600 w-[10%]"></div>
  </div>
</div>
<div class="col">
  <p>primary</p>
  <div class="progress">
    <div class="progress-bar bg-primary w-[20%]"></div>
  </div>
</div>
<div class="col">
  <p>secondary</p>
  <div class="progress">
    <div class="progress-bar bg-secondary w-[30%]"></div>
  </div>
</div>
<div class="col">
  <p>tertiary</p>
  <div class="progress">
    <div class="progress-bar bg-tertiary w-[40%]"></div>
  </div>
</div>
<div class="col">
  <p>success</p>
  <div class="progress">
    <div class="progress-bar bg-success w-[50%]"></div>
  </div>
</div>
<div class="col">
  <p>info</p>
  <div class="progress">
    <div class="progress-bar bg-info w-[60%]"></div>
  </div>
</div>
<div class="col">
  <p>warning</p>
  <div class="progress">
    <div class="progress-bar bg-warning w-[70%]"></div>
  </div>
</div>
<div class="col">
  <p>danger</p>
  <div class="progress">
    <div class="progress-bar bg-danger w-[80%]"></div>
  </div>
</div>

Sizes

sm

base

lg

xl

<div class="col">
  <p>sm</p>
  <div class="progress progress-sm">
    <div class="progress-bar bg-primary w-[55%]"></div>
  </div>
</div>
<div class="col">
  <p>base</p>
  <div class="progress progress-base">
    <div class="progress-bar bg-primary w-[55%]"></div>
  </div>
</div>
<div class="col">
  <p>lg</p>
  <div class="progress progress-lg">
    <div class="progress-bar bg-primary w-[55%]"></div>
  </div>
</div>
<div class="col">
  <p>xl</p>
  <div class="progress progress-xl">
    <div class="progress-bar bg-primary w-[55%]"></div>
  </div>
</div>

Multiple Bars

<div class="progress progress-lg">
  <div class="progress-bar bg-primary w-[10%]"></div>
  <div class="progress-bar bg-secondary w-[20%]"></div>
  <div class="progress-bar bg-tertiary w-[15%]"></div>
  <div class="progress-bar bg-danger w-[55%]"></div>
</div>