UIProgress
A bar that shows how far something has got: a course, an upload, a quiz.
A progress bar shows a known amount of completion. When the amount is not known (waiting for a server), use a spinner instead.
When to use it
Use it
- Show the number next to the bar when the exact value matters.
- Use the success colour only for completion.
- Give it a text label that says what progresses.
Don't
- Use a bar when you cannot tell how long it will take.
- Animate a bar that is not changing.
- Use it as a chart.
Anatomy
A track (progress) and one or more bars (progress-bar) whose width is the value. A bar can be striped, animated and carry a label.
Variants and states
This Moodle version has no dark mode: examples stay light.
Several parts in one bar
The parts of one total share a track and join without a gap, so they read as one bar. A legend with dots names each colour.
This Moodle version has no dark mode: examples stay light.
With a label
A title and a value above, or the value at the side. The text carries the number so the colour does not have to.
This Moodle version has no dark mode: examples stay light.
Steps
For a flow in steps or a list of lessons, one small bar per step.
This Moodle version has no dark mode: examples stay light.
Heights
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Single bar × value | One bar, the number at the side or above (“64%”, “4 of 6 activities”). |
| Stacked × total | Parts of one total in one bar, joined, with a legend of dots. |
| Steps × flow | One small bar per step, the finished ones filled; with “Step 3 of 5” above. |
| Colour × meaning | Primary for progress, success for completion, warning and danger when a limit is close (storage). |
| Striped × waiting | Striped and animated only while something is really working. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| The bars of one total join with no gap | Gaps look like separate quantities; a joined bar shows one total split in parts. |
| The ends of the track are round, the joints are straight | The bar reads as one object and the parts are told by colour, not by shape. |
| The number is always written | Progress must not depend on guessing a width: people with low vision or colour blindness read the number. |
| Steps are separate small bars | A person counting steps counts blocks; one long bar hides how many remain. |
Classes
| Class | What it does |
|---|---|
progress |
The track; its height sets the bar height |
progress-bar |
The filled part; width in style |
progress-bar-striped, progress-bar-animated |
Stripes and movement |
bg-success… |
Colour of a bar |
dd-progress, dd-progress-head, dd-progress-value |
A progress bar with its title and value (Didactika) |
dd-progress-inline |
The value at the side of the bar (Didactika) |
dd-progress-steps |
One small bar per step (Didactika) |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable. The role goes on the track.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The role goes on each bar.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The role goes on each bar.
Accessibility
role="progressbar"witharia-valuenow,aria-valuemin,aria-valuemaxand anaria-label.- The value is also written as text when it matters.
- Animated stripes respect the reduced motion preference.