Neon Ripple
No library Intermediate
Three concentric rings in violet, indigo, and sky blue that expand outward from a glowing core dot. Pure CSS, no dependencies.
Three concentric rings in violet, indigo, and sky blue that expand outward from a glowing core dot. Pure CSS, no dependencies.
Goal: Create a "Neon Ripple" loader animation.
Visual behavior: Three concentric rings expand outward from a central glowing dot. Each ring starts tiny (scale 0.1) and fades out at full size (scale 1). The rings are colored violet, indigo, and sky blue respectively. A small solid dot in the center has a matching glow (box-shadow). The three rings are offset by 0.6s each, creating a continuous outward pulse.
Technique: A relative-positioned container holds three absolutely-inset span elements (each border-radius 50%) plus a centered core dot. Each span uses the same scale + opacity keyframe with staggered animation-delay. The core dot uses box-shadow to simulate a neon glow.
Accessibility: aria-label on the wrapper. Animations disabled under prefers-reduced-motion; rings shown as static translucent shapes.
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.