Softify - Multi Component UI Web with Client and Admin Dashboard

Circular One


<div class="flex flex-wrap gap-6">
  <span class="progress-loader default"></span>
  <span class="progress-loader primary"></span>
  <span class="progress-loader secondary"></span>
  <span class="progress-loader info"></span>
  <span class="progress-loader success"></span>
  <span class="progress-loader error"></span>
  <span class="progress-loader warning"></span>
  <span class="progress-loader light"></span>
</div>

Circular Two


<div class="flex flex-wrap gap-6">
  <span class="progress-loader primary"></span>
  <span class="progress-loader primary half"></span>
  <span class="progress-loader primary one-third"></span>
  <span class="progress-loader primary full"></span>
</div>

Sizes


<div class="flex flex-wrap items-center gap-6">
  <span class="progress-loader primary sm"></span>
  <span class="progress-loader primary md"></span>
  <span class="progress-loader primary"></span>
  <span class="progress-loader primary lg"></span>
  <span class="progress-loader primary xl"></span>
  <span class="progress-loader primary xxl"></span>
</div>

Linear One


<div class="flex flex-col gap-6">
  <span class="linear-one default"></span>
  <span class="linear-one primary"></span>
  <span class="linear-one secondary"></span>
  <span class="linear-one info"></span>
  <span class="linear-one success"></span>
  <span class="linear-one error"></span>
  <span class="linear-one warning"></span>
  <span class="linear-one light"></span>
</div>

Linear Two


<div class="flex flex-col gap-6">
  <span class="linear-two default"></span>
  <span class="linear-two primary"></span>
  <span class="linear-two secondary"></span>
  <span class="linear-two info"></span>
  <span class="linear-two success"></span>
  <span class="linear-two error"></span>
  <span class="linear-two warning"></span>
  <span class="linear-two light"></span>
</div>

Linear Three


<div class="flex flex-col gap-6">
  <span class="linear-three default"></span>
  <span class="linear-three primary"></span>
  <span class="linear-three secondary"></span>
  <span class="linear-three info"></span>
  <span class="linear-three success"></span>
  <span class="linear-three error"></span>
  <span class="linear-three warning"></span>
  <span class="linear-three light"></span>
</div>

Linear Four


<div class="flex flex-col gap-6">
  <span class="linear-four default"></span>
  <span class="linear-four primary"></span>
  <span class="linear-four secondary"></span>
  <span class="linear-four info"></span>
  <span class="linear-four success"></span>
  <span class="linear-four error"></span>
  <span class="linear-four warning"></span>
  <span class="linear-four light"></span>
</div>

Settings

Progress