Bootstrap UI Kit

Basic Progress Bar

<div class="progress" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 65%"></div>
</div>

<style>
    .progress {
        height: 8px;
        background: #e2e8f0;
        border-radius: 999px;
        overflow: hidden;
    }
    .progress-bar {
        background: #1e3a8a;
        border-radius: 999px;
        transition: width 0.6s ease;
    }
</style>

Progress with Label

Uploading... 65%

<div class="d-flex justify-content-between mb-1">
    <span>Uploading...</span>
    <span class="fw-bold">65%</span>
</div>
<div class="progress" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 65%"></div>
</div>

Colored Progress Bars

<div class="progress"><div class="progress-bar bg-success" style="width: 40%"></div></div>
<div class="progress"><div class="progress-bar bg-info"    style="width: 55%"></div></div>
<div class="progress"><div class="progress-bar bg-warning" style="width: 70%"></div></div>
<div class="progress"><div class="progress-bar bg-danger"  style="width: 85%"></div></div>

<style>
    .progress { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
    .progress-bar { border-radius: 999px; }
    .progress-bar.bg-success { background: #059669 !important; }
    .progress-bar.bg-info    { background: #0891b2 !important; }
    .progress-bar.bg-warning { background: #d97706 !important; }
    .progress-bar.bg-danger  { background: #dc2626 !important; }
</style>

Striped Progress

<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width: 70%"></div>
</div>

Animated Striped Progress

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 70%"></div>
</div>

Multi-Segment Progress

● Used (30%) ● Reserved (25%) ● Free (20%)

<div class="progress" style="display: flex;">
    <div class="progress-bar" style="width: 30%; background: #1e3a8a;"></div>
    <div class="progress-bar" style="width: 25%; background: #0891b2;"></div>
    <div class="progress-bar" style="width: 20%; background: #059669;"></div>
</div>

Thick Progress Bar

65%

<div class="progress" style="height: 20px;">
    <div class="progress-bar" style="width: 65%; font-size: 0.75rem; font-weight: 700;">
        65%
    </div>
</div>

Circular Progress

65%

90%

45%

<div class="circular-progress" style="--p: 65;">
    <span>65%</span>
</div>

<style>
    .circular-progress {
        --p: 65;
        --size: 80px;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background: conic-gradient(#1e3a8a calc(var(--p) * 1%), #e2e8f0 0);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .circular-progress::before {
        content: '';
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        background: #fff;
    }
    .circular-progress span {
        position: relative;
        font-size: 0.85rem;
        font-weight: 700;
        color: #1e3a8a;
    }
    .circular-progress-success { background: conic-gradient(#059669 calc(var(--p) * 1%), #e2e8f0 0); }
    .circular-progress-success span { color: #059669; }
    .circular-progress-warning { background: conic-gradient(#d97706 calc(var(--p) * 1%), #e2e8f0 0); }
    .circular-progress-warning span { color: #d97706; }
</style>