Overview
A progress bar is a graphical element that informs users of the current working state of a task. It can be used to reduce uncertainty.
Default progress bar
<progress class="sgds-progress" value="15" max="100" aria-valuemin="0" aria-valuemax="100" aria-valuenow="15"></progress>
Assign colours to your progress bar using the
sgds-progress is-*stateColor* class.
<progress class="sgds-progress is-primary" value="15" max="100" aria-valuemin="0" aria-valuemax="100" aria-valuenow="15"></progress>
<progress class="sgds-progress is-secondary" value="30" max="100" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"></progress>
<progress class="sgds-progress is-success" value="45" max="100" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45"></progress>
<progress class="sgds-progress is-info" value="60" max="100" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60"></progress>
<progress class="sgds-progress is-warning" value="75" max="100" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"></progress>
<progress class="sgds-progress is-danger" value="100" max="100" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"></progress>Guidelines
- Always give some type of immediate feedback, such an animated visual change. Without any visual change from the system, most users will assume the action was not registered and they will try again.
- Don't use static progress indicators, such as an unmoving image or text. If the system hangs or becomes stuck, the user has no way of knowing if they need to restart the action.
- Avoid using don't-click-again warnings as users rarely read excess word count (until it's too late). The way to avoid extra clicks is to show the user that the first click has been accepted and is being worked on.
Can't find a component?
Let us know what you need and we’ll be happy to look into it