UI Progress | Menilo Admin & Dashboards Template

Basic Progress

Create a progress bar with Bootstrap using .progressand .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%

<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>

Menilo

Basic Progress

Colored Progress

Progress With Labels

Progress size

Striped Progress

Animated Striped Progress

Default Circle Progress Bar

Circle Size Progress

Circle Color Progress

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

Primary Color

Modern Family House

$375,000

Cozy Studio Apartment

$1,890

Downtown Office Space

$2,200

Luxury Beachfront Villa

$1,250,000

Alex Morgan

Progress

Basic Progress

Colored Progress

Progress With Labels

Progress size

Striped Progress

Animated Striped Progress

Default Circle Progress Bar

Circle Size Progress

Circle Color Progress

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

Primary Color