Pharos
JSTOR's Design System
 Getting started Help FAQs DocumentationDevelopment GitHub JSTOR LogosTypographyColorImageryIconographyElevationVoice and toneJSTOR termsWeb elementsGrammar and styleEditing checklistAlertButtonBreadcrumbCheckboxCheckbox groupCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalMultiselect dropdownPaginationPillPopoverProgress barRadio buttonRadio groupSelectSheetSidenavSliderSwitchTableTabsToastTooltipText inputTextareaToggle button groupOverviewAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Progress Bar
The progress bar visually represents progress of a particular process. It shows how much of the task has been completed and how much is remaining.
Example
A Title
Doing something...

See live code examples in Storybook
Usage

This component can be used to visually represent the completion of a task, such as importing or uploading files or when a process time can be calculated and takes longer than 10 seconds.

Best practices
Dos
  • Give users an indication of how much of the task has completed and how much is left
  • Display the file being uploaded to reinforce that action a user is taking
Don'ts
  • Use a progress bar as a placeholder to indicate page, section or content loading, use a skeleton loader or loading spinner instead
Content guidelines Progress descriptions
  • If the progress bar calls for descriptions, these should be written as short sentence fragments
  • Written in sentence case of the processes
  • The copy should be concise and human sounding
  • When the process is complete "Done!" should be in the description
  • Three dots should be present at the end of each statement to help indicate progress e.g., "Extracting the headers…"
States
Title.xls
Processing
Title.xls
Extracting headers...
Title.xls
Mapping your fields...
Title.xls
Done!
Variants

The progress bar can be used with the file name and description text of the processes, just the filename, or just the progress bar itself. Use the progress bar alone when a filename and processes are unknown.

File Name only
Title.xls
No Title
Accessibility Relevant WCAG guidelines
  • 1.3.1 Info and Relationships A
Importance

For screen reader users, a progress bar will inform the user how far they are into a certain process

Code expectations

Via Deque:

  • We want to use the HTML <Progress> element. Within this element, there should be:
    • role="progressbar"
    • aria-valuemin="0"
    • aria-valuemax="100"
    • aria-label="description of what the progress bar is for"
Expected actions Screen reader
  • Keep them updated with the status of a process
Screenreader specifics
  • Reads: "percent/value that is currently given to progress bar"
  • On completion can give an update such as "complete"
Keyboard

The progress bar should be in the tax index so that users can get the information when in focus, even if the information is announced automatically.