12 CSS Ripple Effects05 / 12

Pure CSSMIT licensed

CSS Ripple Loading Spinner

A six-spinner loading kit, all CSS ripple variants: an orbit-ring trio, a pulse-expand sequence, a conic-gradient radar sweep, a dot-wave orbit, a morphing square ripple and a dual-arc contrarotating spinner. Space Grotesk on a deep charcoal-brown background with amber, violet, green, cyan, rose and gold accents.

Published

Live Demo
Try it

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

The code

<div class="rpl-05">
  <div class="rpl-05__header">
    <h1>CSS Ripple Loading Spinners</h1>
    <p>Six ripple-based loaders — pure CSS, no SVG, no JavaScript</p>
  </div>

  <div class="rpl-05__grid">
    <div class="rpl-05__item">
      <div class="rpl-05__spin-1">
        <span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Orbit Ring</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-2">
        <span></span><span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Pulse Expand</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-3"></div>
      <div class="rpl-05__label">Radar Sweep</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-4">
        <span></span><span></span><span></span>
        <span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Dot Wave</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-5">
        <span></span><span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Square Ripple</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-6"></div>
      <div class="rpl-05__label">Double Arc</div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

.rpl-05,
.rpl-05 *,
.rpl-05 *::before,
.rpl-05 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rpl-05 ::selection {
  background: #f97316;
  color: #fff;
}

.rpl-05 {
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, #0c0a09 0%, #1c1410 50%, #0c0a09 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 60px 24px;
  color: #faf5f0;
}

.rpl-05__header {
  text-align: center;
}

.rpl-05__header h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: #faf5f0;
  letter-spacing: -0.02em;
}

.rpl-05__header p {
  margin-top: 8px;
  font-size: 0.9rem;
  color: rgba(250,245,240,0.4);
  font-weight: 300;
}
/* Spinner grid */

.rpl-05__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 40px 32px;
  width: min(860px, 100%);
  align-items: start;
}

.rpl-05__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
/* ─── Spinner 1: Classic ripple ─── */

.rpl-05__spin-1 {
  position: relative;
  width: 80px;
  height: 80px;
}

.rpl-05__spin-1 span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f97316;
  animation: rpl-05-s1 1.2s linear infinite;
}

.rpl-05__spin-1 span:nth-child(2) {
  inset: 12px;
  border-top-color: #fb923c;
  animation-duration: 1.6s;
  animation-direction: reverse;
}

.rpl-05__spin-1 span:nth-child(3) {
  inset: 24px;
  border-top-color: #fdba74;
  animation-duration: 1s;
}

@keyframes rpl-05-s1 {
  to {
    transform: rotate(360deg);
  }
}
/* ─── Spinner 2: Ripple pulse ─── */

.rpl-05__spin-2 {
  position: relative;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
}

.rpl-05__spin-2 span {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #a78bfa;
  animation: rpl-05-s2 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.rpl-05__spin-2 span:nth-child(1) {
  width: 24px;
  height: 24px;
  animation-delay: 0s;
}

.rpl-05__spin-2 span:nth-child(2) {
  width: 24px;
  height: 24px;
  animation-delay: 0.6s;
}

.rpl-05__spin-2 span:nth-child(3) {
  width: 24px;
  height: 24px;
  animation-delay: 1.2s;
}

.rpl-05__spin-2 span:nth-child(4) {
  width: 24px;
  height: 24px;
  animation-delay: 1.8s;
}

@keyframes rpl-05-s2 {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-color: #c4b5fd;
  }

  70% {
    opacity: 0.4;
    border-color: #7c3aed;
  }

  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}
/* ─── Spinner 3: Radar sweep ─── */

.rpl-05__spin-3 {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(34,197,94,0.8) 100%);
  animation: rpl-05-s3 1.4s linear infinite;
  box-shadow: 0 0 20px rgba(34,197,94,0.2);
}

.rpl-05__spin-3::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #0c0a09;
}

.rpl-05__spin-3::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(34,197,94,0.3);
}

@keyframes rpl-05-s3 {
  to {
    transform: rotate(360deg);
  }
}
/* ─── Spinner 4: Dots ripple ─── */

.rpl-05__spin-4 {
  position: relative;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
}

.rpl-05__spin-4 span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #06b6d4;
  animation: rpl-05-s4 1.4s ease-in-out infinite;
}

.rpl-05__spin-4 span:nth-child(1) {
  transform: rotate(0deg) translateX(28px);
  animation-delay: 0s;
}

.rpl-05__spin-4 span:nth-child(2) {
  transform: rotate(60deg) translateX(28px);
  animation-delay: 0.23s;
}

.rpl-05__spin-4 span:nth-child(3) {
  transform: rotate(120deg) translateX(28px);
  animation-delay: 0.46s;
}

.rpl-05__spin-4 span:nth-child(4) {
  transform: rotate(180deg) translateX(28px);
  animation-delay: 0.69s;
}

.rpl-05__spin-4 span:nth-child(5) {
  transform: rotate(240deg) translateX(28px);
  animation-delay: 0.92s;
}

.rpl-05__spin-4 span:nth-child(6) {
  transform: rotate(300deg) translateX(28px);
  animation-delay: 1.15s;
}

@keyframes rpl-05-s4 {
  0%,
    100% {
    transform: rotate(var(--r,0deg)) translateX(28px) scale(0.5);
    opacity: 0.3;
  }

  50% {
    transform: rotate(var(--r,0deg)) translateX(28px) scale(1.2);
    opacity: 1;
  }
}

.rpl-05__spin-4 span:nth-child(1) {
  --r: 0deg;
}

.rpl-05__spin-4 span:nth-child(2) {
  --r: 60deg;
}

.rpl-05__spin-4 span:nth-child(3) {
  --r: 120deg;
}

.rpl-05__spin-4 span:nth-child(4) {
  --r: 180deg;
}

.rpl-05__spin-4 span:nth-child(5) {
  --r: 240deg;
}

.rpl-05__spin-4 span:nth-child(6) {
  --r: 300deg;
}
/* ─── Spinner 5: Square ripple ─── */

.rpl-05__spin-5 {
  position: relative;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
}

.rpl-05__spin-5 span {
  position: absolute;
  border: 2px solid #f43f5e;
  animation: rpl-05-s5 2s ease-out infinite;
}

.rpl-05__spin-5 span:nth-child(1) {
  width: 0;
  height: 0;
  animation-delay: 0s;
}

.rpl-05__spin-5 span:nth-child(2) {
  width: 0;
  height: 0;
  animation-delay: 0.5s;
}

.rpl-05__spin-5 span:nth-child(3) {
  width: 0;
  height: 0;
  animation-delay: 1.0s;
}

.rpl-05__spin-5 span:nth-child(4) {
  width: 0;
  height: 0;
  animation-delay: 1.5s;
}

@keyframes rpl-05-s5 {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-radius: 0;
  }

  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    border-radius: 4px;
  }
}
/* ─── Spinner 6: Double arc ─── */

.rpl-05__spin-6 {
  position: relative;
  width: 80px;
  height: 80px;
}

.rpl-05__spin-6::before,
.rpl-05__spin-6::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.rpl-05__spin-6::before {
  inset: 0;
  border: 3px solid transparent;
  border-top-color: #fbbf24;
  border-bottom-color: #fbbf24;
  animation: rpl-05-s1 1.1s linear infinite;
}

.rpl-05__spin-6::after {
  inset: 14px;
  border: 3px solid transparent;
  border-left-color: #f59e0b;
  border-right-color: #f59e0b;
  animation: rpl-05-s1 0.8s linear infinite reverse;
}

.rpl-05__label {
  font-size: 0.78rem;
  color: rgba(250,245,240,0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
}

@media (max-width: 520px) {
  .rpl-05__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-05 * {
    animation-play-state: paused !important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Ripple Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Ripple Loading Spinner
Source: https://codefronts.com/motion/css-ripple-designs/css-ripple-loading-spinner/

A six-spinner loading kit, all CSS ripple variants: an orbit-ring trio, a pulse-expand sequence, a conic-gradient radar sweep, a dot-wave orbit, a morphing square ripple and a dual-arc contrarotating spinner. Space Grotesk on a deep charcoal-brown background with amber, violet, green, cyan, rose and gold accents.
## HTML
```html
<div class="rpl-05">
  <div class="rpl-05__header">
    <h1>CSS Ripple Loading Spinners</h1>
    <p>Six ripple-based loaders — pure CSS, no SVG, no JavaScript</p>
  </div>

  <div class="rpl-05__grid">
    <div class="rpl-05__item">
      <div class="rpl-05__spin-1">
        <span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Orbit Ring</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-2">
        <span></span><span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Pulse Expand</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-3"></div>
      <div class="rpl-05__label">Radar Sweep</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-4">
        <span></span><span></span><span></span>
        <span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Dot Wave</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-5">
        <span></span><span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Square Ripple</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-6"></div>
      <div class="rpl-05__label">Double Arc</div>
    </div>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

.rpl-05,
.rpl-05 *,
.rpl-05 *::before,
.rpl-05 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rpl-05 ::selection {
  background: #f97316;
  color: #fff;
}

.rpl-05 {
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, #0c0a09 0%, #1c1410 50%, #0c0a09 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 60px 24px;
  color: #faf5f0;
}

.rpl-05__header {
  text-align: center;
}

.rpl-05__header h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: #faf5f0;
  letter-spacing: -0.02em;
}

.rpl-05__header p {
  margin-top: 8px;
  font-size: 0.9rem;
  color: rgba(250,245,240,0.4);
  font-weight: 300;
}
/* Spinner grid */

.rpl-05__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 40px 32px;
  width: min(860px, 100%);
  align-items: start;
}

.rpl-05__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
/* ─── Spinner 1: Classic ripple ─── */

.rpl-05__spin-1 {
  position: relative;
  width: 80px;
  height: 80px;
}

.rpl-05__spin-1 span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f97316;
  animation: rpl-05-s1 1.2s linear infinite;
}

.rpl-05__spin-1 span:nth-child(2) {
  inset: 12px;
  border-top-color: #fb923c;
  animation-duration: 1.6s;
  animation-direction: reverse;
}

.rpl-05__spin-1 span:nth-child(3) {
  inset: 24px;
  border-top-color: #fdba74;
  animation-duration: 1s;
}

@keyframes rpl-05-s1 {
  to {
    transform: rotate(360deg);
  }
}
/* ─── Spinner 2: Ripple pulse ─── */

.rpl-05__spin-2 {
  position: relative;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
}

.rpl-05__spin-2 span {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #a78bfa;
  animation: rpl-05-s2 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.rpl-05__spin-2 span:nth-child(1) {
  width: 24px;
  height: 24px;
  animation-delay: 0s;
}

.rpl-05__spin-2 span:nth-child(2) {
  width: 24px;
  height: 24px;
  animation-delay: 0.6s;
}

.rpl-05__spin-2 span:nth-child(3) {
  width: 24px;
  height: 24px;
  animation-delay: 1.2s;
}

.rpl-05__spin-2 span:nth-child(4) {
  width: 24px;
  height: 24px;
  animation-delay: 1.8s;
}

@keyframes rpl-05-s2 {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-color: #c4b5fd;
  }

  70% {
    opacity: 0.4;
    border-color: #7c3aed;
  }

  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}
/* ─── Spinner 3: Radar sweep ─── */

.rpl-05__spin-3 {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(34,197,94,0.8) 100%);
  animation: rpl-05-s3 1.4s linear infinite;
  box-shadow: 0 0 20px rgba(34,197,94,0.2);
}

.rpl-05__spin-3::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #0c0a09;
}

.rpl-05__spin-3::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(34,197,94,0.3);
}

@keyframes rpl-05-s3 {
  to {
    transform: rotate(360deg);
  }
}
/* ─── Spinner 4: Dots ripple ─── */

.rpl-05__spin-4 {
  position: relative;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
}

.rpl-05__spin-4 span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #06b6d4;
  animation: rpl-05-s4 1.4s ease-in-out infinite;
}

.rpl-05__spin-4 span:nth-child(1) {
  transform: rotate(0deg) translateX(28px);
  animation-delay: 0s;
}

.rpl-05__spin-4 span:nth-child(2) {
  transform: rotate(60deg) translateX(28px);
  animation-delay: 0.23s;
}

.rpl-05__spin-4 span:nth-child(3) {
  transform: rotate(120deg) translateX(28px);
  animation-delay: 0.46s;
}

.rpl-05__spin-4 span:nth-child(4) {
  transform: rotate(180deg) translateX(28px);
  animation-delay: 0.69s;
}

.rpl-05__spin-4 span:nth-child(5) {
  transform: rotate(240deg) translateX(28px);
  animation-delay: 0.92s;
}

.rpl-05__spin-4 span:nth-child(6) {
  transform: rotate(300deg) translateX(28px);
  animation-delay: 1.15s;
}

@keyframes rpl-05-s4 {
  0%,
    100% {
    transform: rotate(var(--r,0deg)) translateX(28px) scale(0.5);
    opacity: 0.3;
  }

  50% {
    transform: rotate(var(--r,0deg)) translateX(28px) scale(1.2);
    opacity: 1;
  }
}

.rpl-05__spin-4 span:nth-child(1) {
  --r: 0deg;
}

.rpl-05__spin-4 span:nth-child(2) {
  --r: 60deg;
}

.rpl-05__spin-4 span:nth-child(3) {
  --r: 120deg;
}

.rpl-05__spin-4 span:nth-child(4) {
  --r: 180deg;
}

.rpl-05__spin-4 span:nth-child(5) {
  --r: 240deg;
}

.rpl-05__spin-4 span:nth-child(6) {
  --r: 300deg;
}
/* ─── Spinner 5: Square ripple ─── */

.rpl-05__spin-5 {
  position: relative;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
}

.rpl-05__spin-5 span {
  position: absolute;
  border: 2px solid #f43f5e;
  animation: rpl-05-s5 2s ease-out infinite;
}

.rpl-05__spin-5 span:nth-child(1) {
  width: 0;
  height: 0;
  animation-delay: 0s;
}

.rpl-05__spin-5 span:nth-child(2) {
  width: 0;
  height: 0;
  animation-delay: 0.5s;
}

.rpl-05__spin-5 span:nth-child(3) {
  width: 0;
  height: 0;
  animation-delay: 1.0s;
}

.rpl-05__spin-5 span:nth-child(4) {
  width: 0;
  height: 0;
  animation-delay: 1.5s;
}

@keyframes rpl-05-s5 {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-radius: 0;
  }

  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    border-radius: 4px;
  }
}
/* ─── Spinner 6: Double arc ─── */

.rpl-05__spin-6 {
  position: relative;
  width: 80px;
  height: 80px;
}

.rpl-05__spin-6::before,
.rpl-05__spin-6::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.rpl-05__spin-6::before {
  inset: 0;
  border: 3px solid transparent;
  border-top-color: #fbbf24;
  border-bottom-color: #fbbf24;
  animation: rpl-05-s1 1.1s linear infinite;
}

.rpl-05__spin-6::after {
  inset: 14px;
  border: 3px solid transparent;
  border-left-color: #f59e0b;
  border-right-color: #f59e0b;
  animation: rpl-05-s1 0.8s linear infinite reverse;
}

.rpl-05__label {
  font-size: 0.78rem;
  color: rgba(250,245,240,0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
}

@media (max-width: 520px) {
  .rpl-05__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-05 * {
    animation-play-state: paused !important;
  }
}
```

Techniques used in this demo

conic-gradient()MDN ↗grid-templateMDN ↗@keyframesMDN ↗clamp()MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →