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
Loading Spinner
Loading spinners indicate that a page, section, or content is loading.
Example

See live code examples in Storybook
Usage

Loading spinners should be placed over pages or their sections that need to load before the user can continue with their experience.

Best practices
Dos

Use loading spinners to indicate progress when the time remaining can't be determined

Don'ts

Don't use loading spinners to indicate an action the user took is being processed or when the time remaining is known. Use the progress bar instead.

Accessibility Relevant WCAG guidelines
  • 4.1.3 Status Messages
Importance

Loading spinners visually (and audibly) inform the user that something is in the process of loading

Code expectations
  • Role = "alert"
  • Add an aria-live = "assertive" to the loading <div> element
  • Add a visually hidden <p> tag that has a message for assistive technology within that div
    • Ex. "content is loading"
  • Add visually hidden text, triggered by Javascript to announce when content has loaded
    • Ex. "content has loaded"
  • Example to reference: (Side note that styling in example can be changed. The example is provided to demonstrate the screen reader interaction)
<div
              id="loading-spinner"
              className="loading-spinner js-loading-spinner"
              role="alert"
              aria-live="assertive"
            >
              <p className="vh js-loading-spinner-copy">Content is loading...</p>
            </div>
Screen reader
  • When spinner is active - audible message: "Content is loading"
  • When content is done loading - audible message: "Content is loaded"
Keyboard
  • No specific keyboard commands since aria-live announces "assertive" automatically