12 CSS Ripple Effects 05 / 12

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.

Pure CSS MIT licensed
Live Demo Open in tab

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

Open in playground

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; }
}

More from 12 CSS Ripple Effects

CSS Ripple Button Click AnimationCSS Pond Ripple Background AnimationCSS Heartbeat Pulse Ripple EffectCSS Ripple Login Form UICSS Aurora Borealis Ripple BackgroundCSS Neon Glow Ripple EffectCSS Sonar Ping Ripple AnimationCSS Ripple Card Hover EffectCSS Sound Wave Ripple VisualizerCSS Liquid Drop Ripple AnimationCSS Water Ripple Click Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →