Loaders

Loaders provide system feedback about the duration and progression of a system status, such as a download, file transfer, or installation to indicate how long a user will be waiting. They are used to reassure the user that the system is working and communicates actively while waiting for a response to change.

On this page

Linear Determinate

Use Case

For tasks where the system can measure system progress, users should be able to:

  • Be able to understand what’s progressing via a visible or programmatic label
  • Be able to perceive the current progress value
  • Be able to track progress updates with assisted tech

Users should be able to:

  • Identify what the indicator refers to (label)
  • Know the current value and range
  • Navigate and perceive the progress through a screen reader

Interaction and Style

Relevant WCAG Requirements

  • Info and Relationships

    Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.

    WCAG 2.1 Understanding 1.3.1

  • Name, Role, Value

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    WCAG 2.1 Understanding 4.1.2

Linear Indeterminate

Use Case

For tasks that are on-going but cannot be measured (for example connecting to the server), users should:

  • Be able to understand context of what’s happening
  • Be notified that the system is busy and responsive
  • Not be misled by the absence of feedback (for instance, if the application is frozen)

Users should be able to:

  • Recognize the system is working even if duration is unknown
  • Understand what the Loader represents
  • Hear status updates via screen reader if no visible label is present

Interaction and Style

Relevant WCAG Requirements

  • Non-text Content

    Provide text alternatives for all non-text content. This includes images, buttons, form inputs, maps, etc. Text alternatives allow screen readers to describe these elements to visually impaired users.

    WCAG 2.1 Understanding 1.1.1

  • Info and Relationships

    Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.

    WCAG 2.1 Understanding 1.3.1

  • Name, Role, Value

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    WCAG 2.1 Understanding 4.1.2

Progress Circular Indeterminate

Use Case

Used for compact, indeterminate loading states — often in constrained layouts like cards, overlays or buttons. Users should:

  • Be able to identify what’s loading, even without reading visual arc animation
  • Not rely solely on motion or shape to determine progress
  • Understand the action being processed, especially if multiple loaders are shown

Users should be able to:

  • Identify the component as a system progress indicator, demonstrating loading times
  • Understand what task is associated with it
  • Receive updates (if paired with live region or loading label)

Interaction and Style

Relevant WCAG Requirements

  • Info and Relationships

    Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.

    WCAG 2.1 Understanding 1.3.1

  • Pause, Stop, Hide

    For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it.

    WCAG 2.1 Understanding 2.2.2

  • Name, Role, Value

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    WCAG 2.1 Understanding 4.1.2

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.