Dots Circle
No library Beginner
Eight dots arranged in a clock face, fading in and out in radial sequence — the classic OS-native loading indicator pattern. Pure CSS, no dependencies.
Eight dots arranged in a clock face, fading in and out in radial sequence — the classic OS-native loading indicator pattern. Pure CSS, no dependencies.
Goal: Create a "Dots Circle" loader animation.
Visual behavior: Eight 6px dots arranged evenly in a circle (at 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°). Each dot fades from near-invisible to full opacity in a wave that travels clockwise, like a spinning clock. Each dot is 125ms behind the previous one.
Technique: All dots are position:absolute, centered at 50%/50%, then translated outward via rotate(Ndeg) translateY(-19px). A single keyframe oscillates opacity 0.12 → 1 → 0.12 over 1s ease-in-out. Each nth-child gets an animation-delay stepped at 125ms intervals (0 through 875ms).
Accessibility: aria-label on the wrapper. Animations disabled under prefers-reduced-motion; dots shown at low static opacity.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.