A worked example, rendered from real sample data. Sign in to run the tool on your own input.
ring.spinner {
width: 64px; height: 64px;
border: 5px solid rgba(148, 163, 184, 0.25);
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-label {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
.spinner, .spinner *, .spinner::before, .spinner::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* HTML: <div role="status" aria-live="polite"><div class="spinner"></div><span class="spinner-label">Loading…</span></div> */
Generate CSS-only loading spinners and progress indicators. Part of the DevTools Surf developer suite. Browse more tools in the Animation / CSS collection.