Simple progress bar
Examples
Check out the Usage section for details about how to design a Simple progress bar properly, and the different configuration options we provide.
Basic Example
You can display a bar that indicates how far a process has progressed.
<SimpleProgressBar
completed={25}
total={100}
/>
Usage
Overview
The simple progress bar shows the current progress of a system operation, such as loading, uploading, or submitting. It also shows the progress of a particular task before completion.
When to use
Use a progress bar to show the current progress of a system operation, such as loading, uploading, or submitting, especially when:
- The task has measurable progress (for example, percentage complete).
- The task is complex or has a long wait time and users need feedback on its status.
- You want to reduce user uncertainty by providing visual feedback during long-running operations.
When not to use
Don’t use a progress bar in these scenarios:
- For very short tasks that don’t require detailed feedback—use simpler indicators like loaders.
- To show progress through a series of discrete steps (for example, filling out a multi-step form). Instead, use step progress bar.
- To show steps and sub-steps for a particular task or use custom icons. Instead, use phase progress bar.
Formatting
Anatomy
The progress bar consists of the following elements:
- Label: Describes the task or operation the progress bar is tracking.
- Numeric value: Represents the progress of a system operation or task within the progress bar's range. The numeric value is shown as a fraction or percentage.
- Bar: Represents the progress of a system operation or task by displaying a filled line.
Alignment and placement
The label can appear at the top or at the bottom of the progress bar.
Content
General writing guidelines
- Use sentence case for all aspects of designing Guidewire product interfaces. Don't use title case.
- Use present tense verbs and active voice in most situations.
- Use common contractions to lend your copy a more natural and informal tone.
- Use plain language. Avoid unnecessary jargon and complex language.
- Keep words and sentences short.
Progress bar label
- Include a progress bar label to give context about the operation or task being performed. In rare cases where context is sufficient, the label can be hidden. These progress bars must still include an
aria-labelattribute so that they are accessible. - Keep the progress bar label short and concise. Limit the label to a few words or a single line of text.
- Use sentence case for labels. Capitalize the first word of a phrase and any proper nouns. For additional guidance on how to implement sentence case, see Capitalization.
Accessibility
The simple progress bar includes the WAI-ARIA role of 'progressbar'. It also includes the WAI-ARIA attributes, aria-valuetext, aria-valuenow, aria-valuemin and aria-valuemax to assist in providing additional meaning to assistive technologies.
The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.1 AA requirements. Non-textual content that needs to convey meaning (such as icons and keyboard focus visibility) has a contrast ratio of at least 3:1 with its adjacent colors. All content is visible and functional up to and including 400% without requiring scrolling in two dimensions.
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance.
When using this component within your application, ensure that the progress bar label is meaningful and concise. If you need to hide the label, provide a label prop and set hideLabel to True. This action sets the aria-label attribute to the label.
Code
<SimpleProgressBar
completed={25}
total={100}
/>
Import statement
import { SimpleProgressBar } from '@jutro/components';
Component contract
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
Properties
completedrequired- Type
numberDescriptionNumber of steps that were completed.
totalrequired- Type
numberDescriptionTotal number of steps.
className- Type
stringDescriptionClass to override the whole component styles.
hideLabel- Type
boolDescriptionHides the label. If you need to make the component be without a label and accessible, provide the label prop and set hideLabel to true -> aria-label attribute will be set to label.
Default valuefalse
label- TypeDescription
Label of the progress bar.
labelPosition- Type
'top' | 'bottom'DescriptionAllows you to select the position of the progress bar label.
Default value'bottom'
showPercentageProgress- Type
boolDescriptionIf true, shows percentage progress instead of fractions.
Default valuefalse
showProgressLabel- Type
boolDescriptionShows progress label.
Default valuetrue
iddeprecated- Type
stringDescriptionA unique ID for this element.
pathdeprecated- Type
stringDescriptionHint path to value.
progressBarClassNamedeprecated- Type
stringDescriptionClass to override the progress bar styles.
stepClassNamedeprecated- Type
stringDescriptionClass to override the progress bar step styles.
valuedeprecated- Type
numberDescriptionNumber of steps that were completed when used with path.
Hooks
No hooks are available for SimpleProgressBar.
Translation keys
There are no translations for SimpleProgressBar.
For information on how to manage translations, see our section about Internationalization.
Escape Hatches
For more information, see our documentation about escape hatches.