Progress Bars
Active
<div class="progress-bar active">
<div class="progress " style="--progress: 15%"></div>
</div>Paused
<div class="progress-bar paused">
<div class="progress " style="--progress: 75%"></div>
</div>Static badge
<div class="progress-bar active">
<div class="progress" style="--progress: 75%"></div>
<div class="progress-label">
<span class="badge-color-slate-500 badge-pill aspect-ratio-square text-xs">75</span>
</div>
</div>Dynamic Badge Active
<div class="progress-bar active">
<div class="progress" style="--progress: 75%">
<div class="progress-label">
<span class="badge badge-pill aspect-ratio-square text-xs font-bold">75</span>
</div>
</div>
</div>Dynamic Badge Paused
<div class="progress-bar paused">
<div class="progress" style="--progress: 75%">
<div class="progress-label">
<span class="badge badge-pill aspect-ratio-square text-xs font-bold">75</span>
</div>
</div>
</div>Progress Bar with Label
<div class="flex flex-col gap-3">
<label class="text-header"><strong>Overall Audit Progress Completion</strong> 20%</label>
<div class="progress-bar active">
<div class="progress " style="--progress: 15%"></div>
</div>
</div>Progress Bar xs
<div class="flex flex-col gap-3">
<label class="text-header"><strong>Overall Audit Progress Completion</strong> 20%</label>
<div class="progress-bar progress-bar-xs active">
<div class="progress " style="--progress: 15%"></div>
</div>
</div>Multiple Progress Bars
<div class="flex flex-col gap-3">
<label class="text-header"><strong>Overall Audit Progress Completion</strong> 20%</label>
<div class="progress-bar active mb-3">
<div class="progress " style="--progress: 15%"></div>
</div>
<label class="text-header"><strong>Crawl Progress</strong> Paused</label>
<div class="progress-bar paused">
<div class="progress " style="--progress: 67%"></div>
</div>
</div>