Loading indicator

Show users that content is loading or an action is being processed

Overview #

Use the loading indicator component to show the user that content is loading or that an action is being processed.

Loading indicators are often used as a placeholder when content is being loaded via JavaScript into one section of a page.

Examples #

Choose an example

Open in new window Copy link to example

<div class="rvt-loader rvt-loader--xxs" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--xs" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--sm" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--md" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--lg" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--xl" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--xxl" aria-label="Content loading"></div>

Open in new window Copy link to example

<button class="rvt-button rvt-button--loading" aria-busy="true" disabled>
  <span class="rvt-button__content">Update settings</span>
  <div class="rvt-loader rvt-loader--xs" aria-label="Content loading"></div>
</button>

Open in new window Copy link to example

<div class="rvt-flex rvt-justify-center rvt-p-tb-xxl rvt-border-all rvt-border-radius">
  <div class="rvt-loader rvt-loader--lg" aria-label="Content loading"></div>
</div>

Usage #

Use utility classes to position the loading indicator. The loading indicator component does not come with any specific positioning styles. You’ll need to position it appropriately in the container where your content will eventually display once it’s loaded. Use the spacing and flex utilities to position the loading indicator.
Hide button text when in a loading state. When using a loading indicator inside a button, the button text should be wrapped in a span element with the .rvt-button__content class (see above example). This class visually hides the button text when the loading indicator is visible while maintaining the display width of the button. This class also hides any other content inside the button, such as SVG icons.

Do

Use to show that content is being loaded or that an action is being processed

Don't

Use as a placeholder when there is no content to show—use an empty state instead