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
- Figma library
-
Ready - Responsive
-
Ready - RH Elements
-
Ready - webRH
-
Ready

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
Demos
View a live version of this component and see how it can be customized.
<rh-spinner></rh-spinner>
<script type="module">
import '@rhds/elements/rh-spinner/rh-spinner.js';
</script>
<rh-spinner>
demo in a new tabStatus checklist
Property | Status | Meaning |
---|---|---|
Figma library |
|
Component is available in the Figma library |
Responsive |
|
Component responds to changing viewport sizes in Figma and the browser |
RH Elements |
|
Component is available as a web component |
webRH |
|
Component is available as a web component |
Related 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