Show the completion progress of a task using Bootstrap's native progress bar.
Use .progress and .progress-bar when completion can be measured as a value between a minimum and maximum. Render the bar with an accessible label, set the current value and maximum, and show nearby text when users need the task name, percentage, or status outside the visual track.
.progress
.progress-bar
Keep the progress bar itself simple: Bootstrap drives the fill from width, supports labels when the bar is tall enough, and can stack multiple bars when the same track represents related segments. Moo UI uses a slim track, so readable labels belong beside or above the bar rather than inside it.
Use contextual color only when it communicates real state, and never rely on color alone. If the amount of work cannot be measured, use Spinner or a loading state instead of showing a fake percentage.
A slim, rounded bar; the fill width is driven entirely by value/max.
value
max
1 2 3 4 5 6 7 8 9 10 11 12 13 14<div class="w-100"> <div> <div class="progress" role="progressbar" aria-label="Upload progress" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 66%"></div> </div> </div> </div>
<div class="w-100"> <div> <div class="progress" role="progressbar" aria-label="Upload progress" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 66%"></div> </div> </div> </div>
Stack several bars to compare progress across related tasks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38<div class="d-grid gap-3"> <div> <div class="progress" role="progressbar" aria-label="Step 1 progress" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 20%"></div> </div> </div> <div> <div class="progress" role="progressbar" aria-label="Step 2 progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 50%"></div> </div> </div> <div> <div class="progress" role="progressbar" aria-label="Step 3 progress" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 90%"></div> </div> </div> </div>
<div class="d-grid gap-3"> <div> <div class="progress" role="progressbar" aria-label="Step 1 progress" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 20%"></div> </div> </div> <div> <div class="progress" role="progressbar" aria-label="Step 2 progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 50%"></div> </div> </div> <div> <div class="progress" role="progressbar" aria-label="Step 3 progress" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 90%"></div> </div> </div> </div>
Set show_label=true to render the name and percentage above the bar; the 4px track is too thin for readable inline text.
show_label=true
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18<div class="w-100"> <div> <div class="d-flex justify-content-between small mb-1"> <span>Download progress</span> <span class="text-body-secondary">40%</span> </div> <div class="progress" role="progressbar" aria-label="Download progress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 40%"></div> </div> </div> </div>
<div class="w-100"> <div> <div class="d-flex justify-content-between small mb-1"> <span>Download progress</span> <span class="text-body-secondary">40%</span> </div> <div class="progress" role="progressbar" aria-label="Download progress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 40%"></div> </div> </div> </div>
Use tabs to compare Arabic, Hebrew, and English progress bars with the fill growing from the reading-direction start.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18<div dir="rtl" class="w-100"> <div> <div class="d-flex justify-content-between small mb-1"> <span>تقدم التنزيل</span> <span class="text-body-secondary">40%</span> </div> <div class="progress" role="progressbar" aria-label="تقدم التنزيل" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 40%"></div> </div> </div> </div>
<div dir="rtl" class="w-100"> <div> <div class="d-flex justify-content-between small mb-1"> <span>تقدم التنزيل</span> <span class="text-body-secondary">40%</span> </div> <div class="progress" role="progressbar" aria-label="تقدم التنزيل" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 40%"></div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18<div dir="rtl" class="w-100"> <div> <div class="d-flex justify-content-between small mb-1"> <span>התקדמות ההורדה</span> <span class="text-body-secondary">40%</span> </div> <div class="progress" role="progressbar" aria-label="התקדמות ההורדה" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 40%"></div> </div> </div> </div>
<div dir="rtl" class="w-100"> <div> <div class="d-flex justify-content-between small mb-1"> <span>התקדמות ההורדה</span> <span class="text-body-secondary">40%</span> </div> <div class="progress" role="progressbar" aria-label="התקדמות ההורדה" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 40%"></div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18<div dir="ltr" class="w-100"> <div> <div class="d-flex justify-content-between small mb-1"> <span>Download progress</span> <span class="text-body-secondary">40%</span> </div> <div class="progress" role="progressbar" aria-label="Download progress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 40%"></div> </div> </div> </div>
<div dir="ltr" class="w-100"> <div> <div class="d-flex justify-content-between small mb-1"> <span>Download progress</span> <span class="text-body-secondary">40%</span> </div> <div class="progress" role="progressbar" aria-label="Download progress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" > <div class="progress-bar" style="width: 40%"></div> </div> </div> </div>
For Bootstrap's source behavior and stacked/striped/animated variants, see the Bootstrap Progress documentation.
No matching pages.
Restore the default appearance.