Progress indicator
About
What does it do?
- It is visual representation of progress through a set of steps that guides user in order to complete a specified process. Knowing where the user is in their progress can help improve their orientation within the system. It sets expectations and gives and impression of activity and progress.
When to use it?
- When you want to tell users where they are in the process.
- When you want to reassure users that the system is working and reduce user’s uncertainty.
When not to use it?
- When progress cannot be measured and therefore does not have a percentage that indicates the amount of progress.
Section 1 of X
Section Name
HTML markup
<div class="wmnds-progress-indicator">
Section 1 of X
<h4>Section Name</h4>
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/progress-indicator/_progress-indicator.njk" import wmndsProgressIndicator %}
{{
wmndsProgressIndicator({
currentSection: "1",
totalSections: "X",
sectionName: "Section Name"
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| currentSection | string | Required. Specifies the section which the user is currently on. |
| totalSections | string | Required. Specifies the total number of sections in the sequence. |
| sectionName | string | Required. Text to describe the name or title of the current section. |