spinner pulse loader loading circle indicator text spinner pulse loader loading circle indicator scale fade text pulsing loading indicator with text circle pulse spinner
Spinner Pulse
Fetch pattern JSON:
curl https://webspire.de/patterns/spinner/pulse.json pulse.html
<style>
@keyframes ws-spinner-pulse {
0% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.8); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
.ws-spinner-pulse [data-pulse] {
animation: none !important;
opacity: 0.7;
}
}
</style>
<div class="ws-spinner-pulse" role="status">
<span class="sr-only">Loading</span>
<div class="flex items-center gap-3">
<div
data-pulse
class="h-8 w-8 rounded-full bg-[var(--ws-spinner-accent)]"
style="animation: ws-spinner-pulse 1.5s ease-in-out infinite;"
></div>
<span class="text-sm font-medium text-[var(--ws-spinner-text)]">Loading...</span>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
spinnerpulseloaderloadingcircleindicatortext
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Pulsing circle with optional loading text. |
Pulsing circle spinner extending the base. The circle scales between 0.8 and 1.0 while fading between 50% and 100% opacity, creating a gentle breathing effect. Shown with a “Loading…” text label beside it. Uses --ws-spinner-accent for the circle and --ws-spinner-text for the label text.