Progress

  1. Base UI
  2. Progress

Default Progress

A Default Progress Example.


<!-- Base Examples -->
<div class="mb-4">
    <Progress value={0} />
</div>

<div class="mb-4">
    <Progress value={25} />
</div>

<div class="mb-4">
    <Progress value={50} />
</div>

<div class="mb-4">
    <Progress value={75} />
</div>

<div>
    <Progress value={100} />
</div>

Progress with background color

Use color="Required Color" attribute to progress bar class with the below-mentioned color variation to set the background color progress bar.


<!-- Backgrounds -->
<div class="mb-4">
    <Progress color="primary" value={15} />
</div>

<div class="mb-4">
    <Progress color="success" value={25} />
</div>

<div class="mb-4">
    <Progress color="info" value={50} />
</div>

<div class="mb-4">
    <Progress color="warning" value={75} />
</div>

<div>
    <Progress color="danger" value={100} />
</div>

Progress with Label

Add labels to your progress bars by placing text within the progress-bar.

25%

<!-- Labels Example -->
<Progress color="primary" value={25}> 25% </Progress>

Multiple Bars

Multiple bar color to change the appearance of individual progress bars.


<!-- Multiple Bars -->
<Progress multi>
    <Progress bar value="15" />
    <Progress bar color="success" value="30" />
    <Progress bar color="info" value="20" />
</Progress>

Height

Use progress-sm, progress-lg, or progress-xl class to set the different heights of progress.

Small Progress
Default Progress
Large Progress
Extra Large Progress

<!-- Prgress sm -->
<div class="mb-4">
    <h5 class="fs-13">Small Progress</h5>
    <Progress color="primary" value={25} class="progress-sm" />
</div>

<!-- Prgress Default -->
<div class="mb-4">
    <h5 class="fs-13">Default Progress </h5>
    <Progress color="success" value={40} class="progress-md" />
</div>

<!-- Prgress lg -->
<div class="mb-4">
    <h5 class="fs-13">Large Progress</h5>
    <Progress color="warning" value={50} class="progress-lg" />
</div>

<!-- Prgress xl -->
<div>
    <h5 class="fs-13">Extra Large Progress</h5>
    <Progress color="danger" value={70} class="progress-xl" />
</div>

Striped Progress

Use striped attribute to add strip to the progress.


<!-- Striped Prgress -->
<div class="mb-4">
    <Progress striped value={25} />
</div>
<div>
    <Progress color="success" striped value={40} />
</div>

Animated Striped Progress

Use striped animated attribute to add strip with animation to the progress.


<!-- Animated Striped Progress -->
<div>
    <Progress value={75} striped animated />
</div>

Gradient Progress

Use bg-gradient class to show gradient progress bar.


<!-- Gradient -->
<div class="mb-4">
    <Progress value={15} class="bg-gradient" />
</div>
<div class="mb-4">
    <Progress color="success" value={25} class="bg-gradient" />
</div>
<div class="mb-4">
    <Progress color="info" value={50} class="bg-gradient" />
</div>
<div class="mb-4">
    <Progress color="warning" value={75} class="bg-gradient" />
</div>
<div>
    <Progress color="danger" value={100} class="bg-gradient" />
</div>

Animated Progress

Use animated-progess class to show progress with animation.


<!-- Animated Progress -->
<div class="mb-4">
    <Progress value={15} class="animated-progess" />
</div>
<div class="mb-4">
    <Progress value={25} color="success" class="animated-progess" />
</div>
<div class="mb-4">
    <Progress value={50} color="info" class="animated-progess" />
</div>
<div class="mb-4">
    <Progress value={75} color="warning" class="animated-progess" />
</div>
<div>
    <Progress value={100} color="danger" class="animated-progess" />
</div>

Custom Progress

Use animated-progess custom-progess class to show custom progress with animation.


<!-- Custom Progress -->
<div class="mb-4">
    <Progress value={15} color="primary" class="animated-progess custom-progress" />
</div>
<div class="mb-4">
    <Progress value={25} color="success" class="animated-progess custom-progress" />
</div>
<div class="mb-4">
    <Progress value={50} color="info" class="animated-progess custom-progress" />
</div>
<div class="mb-4">
    <Progress value={75} color="warning" class="animated-progess custom-progress" />
</div>
<div>
    <Progress value={100} color="danger" class="animated-progess custom-progress" />
</div>

Custom Progress with Label

Use animated-progess custom-progess progress-label class to show custom progress with animation and label.

15%
25%
30%

<!-- Custom Progress with Label -->
<div class="d-flex align-items-center pb-2 mt-4">
    <div class="flex-shrink-0 me-3">
        <div class="avatar-xs">
            <div class="avatar-title bg-light rounded-circle text-muted fs-16">
                <i class="mdi mdi-facebook"></i>
            </div>
        </div>
    </div>
    <div class="flex-grow-1">
        <div>
            <Progress value={15} color="primary" class="animated-progess custom-progress progress-label" ><div class="label">15%</div> </Progress>
        </div>
    </div>
</div>

<div class="d-flex align-items-center py-2">
    <div class="flex-shrink-0 me-3">
        <div class="avatar-xs">
            <div class="avatar-title bg-light rounded-circle text-muted fs-16">
                <i class="mdi mdi-twitter"></i>
            </div>
        </div>
    </div>
    <div class="flex-grow-1">
        <div>
            <Progress value={25} color="success" class="animated-progess custom-progress progress-label" ><div class="label">25%</div> </Progress>
        </div>
    </div>
</div>

<div class="d-flex align-items-center py-2">
    <div class="flex-shrink-0 me-3">
        <div class="avatar-xs">
            <div class="avatar-title bg-light rounded-circle text-muted fs-16">
                <i class="mdi mdi-github"></i>
            </div>
        </div>
    </div>
    <div class="flex-grow-1">
        <div>
            <Progress value={50} color="info" class="animated-progess custom-progress progress-label" ><div class="label">30%</div> </Progress>
        </div>
    </div>
</div>

Content Progress

Example of progress with content wrapped in progress.

30% Update in progress...
1 min left
60% Update in progress...
45s left
82% Update in progress...
25s left

<!-- Content Progress -->
<Card class="bg-light overflow-hidden shadow-none">
    <CardBody>
        <div class="d-flex">
            <div class="flex-grow-1">
                <h6 class="mb-0"><b class="text-secondary">30%</b> Update in
                    progress...</h6>
            </div>
            <div class="flex-shrink-0">
                <h6 class="mb-0">1 min left</h6>
            </div>
        </div>
    </CardBody>
    <div >
        <Progress value={30} color="info" class="bg-info-subtle rounded-0" />
    </div>
</Card>

<Card class="bg-light overflow-hidden shadow-none">
    <CardBody>
        <div class="d-flex">
            <div class="flex-grow-1">
                <h6 class="mb-0"><b class="text-success">60%</b> Update in
                    progress...</h6>
            </div>
            <div class="flex-shrink-0">
                <h6 class="mb-0">45s left</h6>
            </div>
        </div>
    </CardBody>
    <div>
        <Progress value={60} color="success" class="bg-success-subtle rounded-0" />
    </div>
</Card>

<Card class="bg-light overflow-hidden shadow-none">
    <CardBody>
        <div class="d-flex">
            <div class="flex-grow-1">
                <h6 class="mb-0"><b class="text-danger">82%</b> Update in
                    progress...</h6>
            </div>
            <div class="flex-shrink-0">
                <h6 class="mb-0">25s left</h6>
            </div>
        </div>
    </CardBody>
    <div>
        <Progress value={82} color="danger" class="bg-danger-subtle rounded-0" />
    </div>
</Card>

Progress with Steps

Here is the example of progress which is represented by steps completion.


<!-- Progress with Steps -->
<div class="position-relative m-4">
    <Progress value={50} style="height: 1px" />
    <Button size="sm" color="primary" class="position-absolute top-0 start-0 translate-middle rounded-pill" style="width: 2rem; height: 2rem">1</Button>
    <Button size="sm" color="primary" class="position-absolute top-0 start-50 translate-middle rounded-pill" style="width: 2rem; height: 2rem">2</Button>
    <Button size="sm" color="light" class="position-absolute top-0 start-100 translate-middle rounded-pill" style="width: 2rem; height: 2rem">3</Button>
</div>

Step Progress with Arrow

Use progress-step-arrow class to create step progress with an arrow.

Step 1
Step 2
Step 3

<!-- Step Progress with Arrow -->
<Progress multi class='progress-step-arrow progress-info'>
    <Progress bar value="35"> Step 1 </Progress>
    <Progress bar value="35"> Step 2 </Progress>
    <Progress bar value="35" color="light" class="text-dark"> Step 3 </Progress>
</Progress>
2025 © Velzon.
Design & Develop by Themesbrand