Progress
The progress is an indicator component which can be used to show the completion progress of a task.
Create amazing Typeform-like forms and pages just by writing Markdown!
Overview #
A progress component can be created by adding the .progress
class to a wrapping <div>
, with an inner .progress-bar
which is used purely for the visualization and labeling. A few things to keep in mind:
- The
.progress
wrapper requires arole="progressbar"
andaria
attributes to make it accessible, including an accessible name (usingaria-label
,aria-labelledby
, or similar). - The
.progress-bar
requires an inline style, utility class, or custom CSS to set its width.
HTML
<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>
Information
Please note, progress components are block-level and will take up the full width of their parent containers. In the example above (and all others on this page), the progress components have been placed inside a container with the class.specific-w-300
.
Height and label #
Add labels by placing text within the .progress-bar
. The default height
of the bar and the font-size
of the label are a little too small to display the label in a way where it is readable. Therefore, when setting inset labels, please increase the height
of the progress component and increase the font-size
of the bar using an inline style, utility class, or custom CSS.
HTML
<!-- Labeled progress -->
<div class="progress specific-h-25" role="progressbar" aria-label="Labeled example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar fs-6" style="width: 25%;">25%</div>
</div>
Note that by default, the content inside the .progress-bar
is controlled with overflow: hidden
, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use .overflow-visible
from the overflow utilities.
Background colors #
Change the background colors of progress components using the color and background helpers. This way, the labels will also have a properly contrasting color should you choose to use one.
HTML
<!-- Success progress -->
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar text-bg-success" style="width: 100%;"></div>
</div>
<!-- Info progress -->
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar text-bg-info" style="width: 75%;"></div>
</div>
<!-- Warning progress -->
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar text-bg-warning" style="width: 50%;"></div>
</div>
<!-- Danger progress -->
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar text-bg-danger" style="width: 25%;"></div>
</div>
Accessibility
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the.visually-hidden
class.
Multiple bars #
You can include multiple progress components inside a container with the .progress-stacked
class to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar must be applied to the .progress
elements, rather than the .progress-bar
elements.
HTML
<!-- Stacked progress bar -->
<div class="progress-stacked">
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<div class="progress-bar"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<div class="progress-bar text-bg-success"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<div class="progress-bar text-bg-warning"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment four" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<div class="progress-bar text-bg-danger"></div>
</div>
</div>
Striped bars #
Create striped progress bars by adding the .progress-bar-striped
class to the .progress-bar
element. They can also be animated by adding .progress-bar-animated
to the bar.
HTML
<!-- Striped progress bar -->
<div class="progress" role="progressbar" aria-label="Striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: 25%;"></div>
</div>
<!-- Striped animated progress bar -->
<div class="progress" role="progressbar" aria-label="Striped animated example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%;"></div>
</div>
Please note, this also works with different background colors (.text-bg-{color}
).
As a loader #
Progress components can also be used as a loader by setting the width of the bar to 100%
, and (more importantly) adding the .placeholder-wave
class to the bar to give it a subtle loading animation. Here's an example showing a real-life UI/UX pattern.
Uploading README.md...
Estimated time remaining: 14 seconds
HTML
<!-- Progress as loader -->
<div class="card specific-w-300 mw-100 mx-auto">
<div class="card-header"></div>
<div class="card-body">
<p class="mb-0">Uploading <strong>README.md</strong>...</p>
<p class="mb-2 text-body-secondary">Estimated time remaning: 14 seconds</p>
<div class="d-flex align-items-center">
<div class="progress flex-grow-1" role="status" aria-label="Loading">
<div class="progress-bar placeholder-wave" style="width: 100%;"></div>
</div>
<div class="flex-shrink-0 ms-1">
<button type="button" class="btn btn-sm btn-secondary rounded-pill px-0" style="width: 24px;" aria-label="Close">×</button>
</div>
</div>
</div>
</div>
Accessibility
Please make sure to addrole="status"
to the progress component and remove the aria-valuenow
, aria-valuemin
, and aria-valuemx
attributes (for assistive technologies).
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.