Preview

Three size variations are displayed on a dark background.

Use cases and features

• Loading/processing display: Used to notify the user of waiting when making an API request, fetching data, etc.

• You can freely change the number of dots: Just add/delete the div.dot element in the HTML.

• Pure CSS: No JavaScript required. Can be embedded directly into display elements.

• Accessibility: Screen reader compatible by adding aria-label="Loading" and role="status".

Points of design and UX

1. 0.16 second delay for each dot: This delay creates an undulating visual rhythm.

2. ease-in-out curve: Each dot appears to have an elastic bounce.

3. opacity fade: A light dancing visual effect by reducing the opacity as it rises.

How to customize

Size variations (SM / MD / LG)

.dot-sm { width: 8px; height: 8px; }

.dot-md { width: 12px; height: 12px; }

.dot-lg { width: 18px; height: 18px; }

Changing animation speed

/* Faster */

.dot { animation-duration: 0.8s; }



/* Late */

.dot { animation-duration: 2s; }

Custom color

.dot { background: #f97316; } /* orange */

Implementation code

<div class="dots-row" role="status" aria-label="Loading">

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

</div>



<style>
.dots-row { display: flex; align-items: center; gap: 0.5rem; }

.dot {

width: 12px; height: 12px;

border-radius: 50%;

background: #6366f1;

animation: dots-wave 1.4s ease-in-out infinite;

}

.dot:nth-child(1) { animation-delay: 0s; }

.dot:nth-child(2) { animation-delay: 0.16s; }

.dot:nth-child(3) { animation-delay: 0.32s; }

.dot:nth-child(4) { animation-delay: 0.48s; }

.dot:nth-child(5) { animation-delay: 0.64s; }

@keyframes dots-wave {

0%, 60%, 100% { transform: translateY(0); opacity: 1; }

30% { transform: translateY(-12px); opacity: 0.7; }

}
</style>

Browser compatibility status

| Browser | Compatibility status |

|--------|-------|

| Chrome 43+ | ✅ Fully compatible |

| Firefox 16+ | ✅ Fully compatible |

| Safari 9+ | ✅ Fully compatible |

| Edge 79+ | ✅ Fully compatible |