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

Sample component
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>
<rh-spinner>
demo in a new tabRelated elements or patterns
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit