##### Basic Progress

Create a progress bar with Bootstrap using `.progress`and `.progress-bar` classes. Set the width of the progress bar with inline styles or utility classes to show progress.

    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 0%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 25%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 50%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 75%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 100%"></div>
    </div>

##### Colored Progress

Use colored progress bars in Bootstrap by applying classes like `.bg-success` or `.bg-danger` to the `.progress-bar` for different colors.

    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 0%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-danger" style="width: 25%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-success" style="width: 50%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-warning" style="width: 75%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-info" style="width: 100%"></div>
    </div>

##### Progress With Labels

Display labels on Bootstrap progress bars by adding text inside the `<div class="progress-bar">`. Use classes like `.text-white` for text color.

20%
40%
60%
80%
100%

    <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-primary" style="width: 20%">20%</div>
    </div>
    <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-success" style="width: 40%">40%</div>
    </div>
    <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-info" style="width: 60%">60%</div>
    </div>
    <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-warning" style="width: 80%">80%</div>
    </div>
    <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-danger" style="width: 100%">100%</div>
    </div>

##### Progress size

Easily adjust the size of progress bars using custom classes. The `.progress-xs` class represents an extra small progress bar, perfect for compact layouts.

    <div class="progress progress-xs" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 20%"></div>
    </div>
    <div class="progress progress-sm" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 40%"></div>
    </div>
    <div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 60%"></div>
    </div>
    <div class="progress progress-lg" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 80%"></div>
    </div>
    <div class="progress progress-xl" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 100%"></div>
    </div>

##### Striped Progress

Create striped progress bars in Bootstrap by adding the `.progress-bar-striped` class to your `<div class="progress-bar">`. This adds a striped pattern to the progress bar for a dynamic look.

    <div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
    </div>

##### Animated Striped Progress

Add animation to striped progress bars in Bootstrap by using `.progress-bar-animated` with `.progress-bar-striped`. This makes the stripes move, creating a dynamic effect.

    <div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 10%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 25%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 50%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 75%"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 100%"></div>
    </div>

##### Default Circle Progress Bar

Use the custom circle progress bar by adding a `.circular-progress` class. Inside, use an `<svg>` element with `<circle>` elements for the background and foreground to visually display progress.

70%

    <div class="circular-progress">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
    </div>
    <div class="circular-progress" style="--progress: 70;">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">70%</div>
    </div>

##### Circle Size Progress

Use size classes like `.circular-*` to adjust the circle progress bar size in Bootstrap. Apply it to `.circular-progress` for a larger display.

40%
40%
40%
40%
40%

    <div class="d-flex align-items-center gap-3">
        <div class="circular-progress circular-xxl">
            <svg class="circular-inner" viewBox="0 0 130 130">
                <circle class="bg-circular-progress"></circle>
                <circle class="fg-circular-progress"></circle>
            </svg>
            <div class="circular-text">40%</div>
        </div>

        <div class="circular-progress circular-xl">
            <svg class="circular-inner" viewBox="0 0 110 110">
                <circle class="bg-circular-progress"></circle>
                <circle class="fg-circular-progress"></circle>
            </svg>
            <div class="circular-text">40%</div>
        </div>

        <div class="circular-progress circular-progress-secondary">
            <svg class="circular-inner" viewBox="0 0 90 90">
                <circle class="bg-circular-progress"></circle>
                <circle class="fg-circular-progress"></circle>
            </svg>
            <div class="circular-text">40%</div>
        </div>

        <div class="circular-progress circular-md">
            <svg class="circular-inner" viewBox="0 0 76 76">
                <circle class="bg-circular-progress"></circle>
                <circle class="fg-circular-progress"></circle>
            </svg>
            <div class="circular-text">40%</div>
        </div>

        <div class="circular-progress circular-sm">
            <svg class="circular-inner" viewBox="0 0 56 56">
                <circle class="bg-circular-progress"></circle>
                <circle class="fg-circular-progress"></circle>
            </svg>
            <div class="circular-text">40%</div>
        </div>
    </div>

##### Circle Color Progress

Change the color of your circle progress bar using the `.circular-progress-*` class. Apply this class to `.circular-progress` for a color scheme.

10%
70%
40%
22%
90%
40%
50%

    <div class="circular-progress circular-progress-primary" style="--progress: 10;">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">10%</div>
    </div>
    <div class="circular-progress circular-progress-secondary" style="--progress: 70;">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">70%</div>
    </div>
    <div class="circular-progress circular-progress-success" style="--progress: 40;">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">40%</div>
    </div>
    <div class="circular-progress circular-progress-info" style="--progress: 22;">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">22%</div>
    </div>
    <div class="circular-progress circular-progress-warning" style="--progress: 90;">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">90%</div>
    </div>
    <div class="circular-progress circular-progress-danger" style="--progress: 40;">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">40%</div>
    </div>
    <div class="circular-progress circular-progress-dark" style="--progress: 50;">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">50%</div>
    </div>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark