Skip to main content

Simple progress bar

Simple progress bar in Storybook

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​

Image that depicts the anatomy of a simple progress bar

The progress bar consists of the following elements:

  1. Label: Describes the task or operation the progress bar is tracking.
  2. 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.
  3. 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.

Image that depicts placement options for the simple progress bar label

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-label attribute 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.

This component has been validated to meet the WCAG 2.2 AA accessibility guidelines in its default, base configuration. This includes ensuring:

  • The contrast ratio of textual elements against their background is above 4.5:1.
  • Non-textual content that needs to convey meaning (like icons and focus indicators) has a contrast ratio of at least 3:1 with its adjacent colors.
  • The item is operable using a keyboard, as well as using a mouse.
  • Content is accessible using screen readers, such as JAWS and VoiceOver.

Accessibility conformance ultimately depends on how this component is implemented and customized. Changes made by the content author can affect accessibility. For details on our shared responsibility model, please review our full Jutro accessibility statement.

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.