A spinner indicates that an action is in progress. It appears as an animated circle over the section that is loading, and it may include a text label

Example of a spinner

Sample element


When to use

  • When loading a section is expected to take fewer than ten seconds
  • When the structure or amount of content that's loading is unknown


View a live version of this component and see how it can be customized.


<script type="module">
import '@rhds/elements/rh-spinner/rh-spinner.js';
View the <rh-spinner> demo in a new tab
© 2021-2024 Red Hat, Inc. Deploys by Netlify