Browse Components
Spinner
A quiet indicator for work in progress.
Basic
Pair the indicator with a short description of the work in progress.
View Code
<div class="cluster" role="status">
<span class="spinner" aria-hidden="true">
</span>
<span>
Loading…
</span>
</div>Sizes
Use the size that suits the surrounding text and controls. Each ring inherits its text color.
View Code
<div class="cluster">
<span class="spinner spinner-small" role="img" aria-label="Small loading indicator">
</span>
<span class="spinner" role="img" aria-label="Default loading indicator">
</span>
<span class="spinner spinner-large" role="img" aria-label="Large loading indicator">
</span>
</div>In a button
Keep the action label visible while work is pending. Your application owns disabling the button and restoring it after completion.
View Code
<button class="btn" type="button" disabled>
<span class="spinner spinner-small" aria-hidden="true">
</span>
Saving…
</button>Right-to-left
Loading text and logical spacing follow the reading direction.
View Code
<div class="cluster" role="status" dir="rtl" lang="he">
<span class="spinner" aria-hidden="true">
</span>
<span>
טוען…
</span>
</div>Without motion
The status remains readable with a static clock icon. Reduced-motion preferences receive the same treatment.
View Code
<div class="cluster" role="status" data-motion="none">
<span class="spinner" aria-hidden="true">
</span>
<span>
Loading…
</span>
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/spinner.css">11,417 bytes CSS including base · 0 bytes runtime JavaScript
Usage
Explain the wait
Keep short, visible status text beside the spinner. Hide the ring itself from assistive technology when the text describes it. Use one polite status region, not nested announcements.
Connect it to real work
Show the spinner only while an operation is pending. Remove it on success or failure and provide the result. Dismissing a loading toast does not cancel its operation.
Keep progress honest
A spinner indicates an unknown duration. Use a progress element when the percentage is known. Mark the updating content region aria-busy and clear that state when it is ready.
Respect motion preferences
Reduced motion and data-motion=none replace the rotating ring with a static clock icon and preserve readable status. The spinner needs no JavaScript.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.