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>