Waiting indicator
Waiting indicators visually indicate that progress is being made toward the completion of a process.
Also known as: activity indicator, busy indicator, indeterminate progress, loader, loading, loading indicator, loading spinner, progress, progress spinner, spin, spinner
Waiting Indicator
Permalink to "Waiting Indicator"<bolt-waiting-indicator>Submitting your request...</bolt-waiting-indicator>Toggling Visibility
Permalink to "Toggling Visibility"By default, the waiting indicator appears as a static element that is visible in the page content. A waiting indicator may also start hidden, and can be displayed using the waiting indicator's show() function.
<bolt-button onclick="window.hiddenWaitDemo.show()">Show waiting indicator</bolt-button>
<bolt-button onclick="window.hiddenWaitDemo.hide()">Hide waiting indicator</bolt-button>
<bolt-waiting-indicator id="hiddenWaitDemo" starthidden>Submitting your request...</bolt-waiting-indicator><bolt-button onclick="window.hiddenWaitDemo.show(3000)">Show waiting indicator - 3 seconds</bolt-button>
<bolt-waiting-indicator id="hiddenWaitDemo" starthidden>Submitting your request...</bolt-waiting-indicator>Fullscreen
Permalink to "Fullscreen"The fullscreen parameter allows the waiting indicator to be displayed as a fullscreen overlay.
<bolt-button onclick="window.fullscreenWaitDemo.show(5000)">Fullscreen demo - 5 seconds</bolt-button>
<bolt-waiting-indicator id="fullscreenWaitDemo" fullscreen starthidden></bolt-waiting-indicator>The bolt-waiting-indicator Web Component should be passed its status message as its content:
<bolt-waiting-indicator>Submitting your request...</bolt-waiting-indicator>If no content is provided, the default message will be "Please wait..."
This component accepts three parameters:
fullscreen: optional. If present, the waiting indicator displays as a full page overlay.starthidden: optional. If present, the waiting indicator will initially not be visible in the page content.minimal: optional. If present, the waiting indicator will use the minimal icon.
The visibility of the waiting indicator may be toggled using the following public methods:
show(duration): Displays the waiting indicator if it is hidden. The optionaldurationparameter determines how long the waiting indicator will remain visible, in miliseconds. If no duration is specified, the waiting indicator will remain visible indefinitely.hide(): Hides the waiting indicator, if it is currently visible.
General guidelines
Permalink to "General guidelines"- Waiting indicators encourage users to wait for a process to complete and helps them understand that it may take a few moments before they can interact with the screen again.
- Loading processes should use the same visualization across an application in all instances.
- A Waiting indicator should be displayed for at least 500 milliseconds so a user has sufficient time to notice it.
- Consider adding a time out period for a processing screen with a Waiting indicator. If it takes longer than the set time out period for a process to be completed (e.g., a non-responsive server) the Waiting indicator should be replaced with a Modal informing a user there was a problem and what they should consider doing next.
When to use
Permalink to "When to use"- If completion time for a process typically takes more than 500 milliseconds.
When not to use
Permalink to "When not to use"- Avoid using Waiting indicators within individual components.
- In filtering situations, a Waiting indicator may be displayed in the results area when data retrieval may take more than 500 milliseconds.
- Avoid using multiple Waiting indicators simultaneously.
When to use something else
Permalink to "When to use something else"- Consider using alternate patterns if the visual layout/format of content is known ahead of time.
Do
- Use Waiting indicator to signify loading or indicate background activity.
- Use a Waiting indicator when swapping content.
- Include a stacked message with a full-page overlay.
- Use for short, but indeterminate length activities.
- Center and position the Waiting indicator closely to where attention is needed post-loading.
- Maintain location and size during a process.
Don't
- Don't use a Waiting indicator if user action is required before content can be displayed.
- Don't use a "waiting cursor" to show progress. Users of touch devices will not be able to see it, and users of devices with mouse input don't need two progress indicators.
- Don't replace or obscure navigation or page elements with a Waiting indicator.
- Don't use Waiting indicators in multiple parts of a single component.
- Don't use as a decoration.
- Don't use a Waiting indicator if an operation takes less than 500 milliseconds.
- Don't use a Waiting indicator in combination with a skeleton loader.
Content guidelines
Permalink to "Content guidelines"- Use verb + noun pairing for Waiting indicator messages.
- Waiting indicator copy uses sentence case.
- Combine Waiting indicator with supporting copy for user context.
- Use supporting copy for processes exceeding user expectations.
- Avoid overly generic or uninformative waiting messages.
Accessibility compliance
Permalink to "Accessibility compliance"-
WCAG 2.2 Compliant
-
JAWS 2025 Tested
-
NVDA 2025 Tested
-
VoiceOver Tested
-
Keyboard Tested
-
aXe Tested
Best Practice
Permalink to "Best Practice"- Waiting indicator needs to contain text that explains what is currently happening to any users.
All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.