Spinner

Overview Style Guidelines Code Accessibility

Overview

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 component

Loading...

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

Demos

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

<link rel="stylesheet" href="demo.css">
<script type="module" src="rh-spinner.js"></script>

<dl>
  <div>
    <dt>Default/Large</dt>
    <dd>
      <rh-spinner></rh-spinner>
    </dd>
  </div>

  <div>
    <dt>Medium</dt>
    <dd>
      <rh-spinner size="md"></rh-spinner>
    </dd>
  </div>

  <div>
    <dt>Small</dt>
    <dd>
      <rh-spinner size="sm"></rh-spinner>
    </dd>
  </div>

  <div>
    <dt>Default/large with text label</dt>
    <dd>
      <rh-spinner>
        <p>Loading...</p>
      </rh-spinner>
    </dd>
  </div>

  <div>
    <dt>Medium with text label</dt>
    <dd>
      <rh-spinner size="md">
        <p>Loading...</p>
      </rh-spinner>
    </dd>
  </div>

  <div>
    <dt>Small with text label</dt>
    <dd>
      <rh-spinner size="sm">
        <p>Loading...</p>
      </rh-spinner>
    </dd>
  </div>
</dl>

<rh-context-provider color-palette="darkest">
  <dl>
    <div>
      <dt>Default/Large</dt>
      <dd>
        <rh-spinner></rh-spinner>
      </dd>
    </div>
    
    <div>
      <dt>Medium</dt>
      <dd>
        <rh-spinner size="md"></rh-spinner>
      </dd>
    </div>
    
    <div>
      <dt>Small</dt>
      <dd>
        <rh-spinner size="sm"></rh-spinner>
      </dd>
    </div> 

    <div>
      <dt>Default/large with text label</dt>
      <dd>
        <rh-spinner>
          <p>Loading...</p>
        </rh-spinner>
      </dd>
    </div>

    <div>
      <dt>Medium with text label</dt>
      <dd>
        <rh-spinner size="md">
            <p>Loading...</p>
        </rh-spinner>
      </dd>
    </div>

    <div>
      <dt>Small with text label</dt>
      <dd>
        <rh-spinner size="sm">
            <p>Loading...</p>
        </rh-spinner>
      </dd>
    </div>
  </dl>
</rh-context-provider>


 View the <rh-spinner> demo in a new tab
© 2021-2023 Red Hat, Inc. Deploys by Netlify
Scroll back to the top