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

Family

spinner

Tier

enhanced

Kind

component

Extends

spinner/base

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.