spinner dots bounce loader loading typing indicator spinner dots bounce loader loading typing indicator three chat bouncing dots loading indicator typing indicator spinner
Spinner Dots
Fetch pattern JSON:
curl https://webspire.de/patterns/spinner/dots.json dots.html
<style>
@keyframes ws-spinner-bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ws-spinner-dots [data-bounce] {
animation: none !important;
opacity: 0.7;
}
}
</style>
<div class="ws-spinner-dots" role="status">
<span class="sr-only">Loading</span>
<div class="flex items-center gap-1.5">
<div
data-bounce
class="h-3 w-3 rounded-full bg-[var(--ws-spinner-accent)]"
style="animation: ws-spinner-bounce 1.4s ease-in-out infinite; animation-delay: 0s;"
></div>
<div
data-bounce
class="h-3 w-3 rounded-full bg-[var(--ws-spinner-accent)]"
style="animation: ws-spinner-bounce 1.4s ease-in-out infinite; animation-delay: 0.16s;"
></div>
<div
data-bounce
class="h-3 w-3 rounded-full bg-[var(--ws-spinner-accent)]"
style="animation: ws-spinner-bounce 1.4s ease-in-out infinite; animation-delay: 0.32s;"
></div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
spinnerdotsbounceloaderloadingtypingindicator
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Three bouncing dot elements. |
Three bouncing dots spinner extending the base. Each dot scales from 0 to 1 and back with staggered delays (0s, 0.16s, 0.32s) creating a wave-like bounce effect. Ideal for chat typing indicators and conversational loading states. Color controlled via --ws-spinner-accent.