Plucked String Loader: Pure CSS Loading Animation

Plucked String Loader

A taut string between two posts is pulled up, released and rings out in a fading vibration before the next pluck. Each segment reads its own sine and cosine factors, which keeps the curve smooth.

Also known as: vibrating string animation, guitar string loader, string pluck effect.

Color Size 64px Dark background

HTML

<div class="ldr-plucked-string" role="status" aria-label="Loading">
  <span style="--k: 0.065; --q: 0.998"></span><span style="--k: 0.195; --q: 0.981"></span><span style="--k: 0.321; --q: 0.947"></span><span style="--k: 0.442; --q: 0.897"></span>
  <span style="--k: 0.556; --q: 0.831"></span><span style="--k: 0.659; --q: 0.752"></span><span style="--k: 0.752; --q: 0.659"></span><span style="--k: 0.831; --q: 0.556"></span>
  <span style="--k: 0.897; --q: 0.442"></span><span style="--k: 0.947; --q: 0.321"></span><span style="--k: 0.981; --q: 0.195"></span><span style="--k: 0.998; --q: 0.065"></span>
  <span style="--k: 0.998; --q: -0.065"></span><span style="--k: 0.981; --q: -0.195"></span><span style="--k: 0.947; --q: -0.321"></span><span style="--k: 0.897; --q: -0.442"></span>
  <span style="--k: 0.831; --q: -0.556"></span><span style="--k: 0.752; --q: -0.659"></span><span style="--k: 0.659; --q: -0.752"></span><span style="--k: 0.556; --q: -0.831"></span>
  <span style="--k: 0.442; --q: -0.897"></span><span style="--k: 0.321; --q: -0.947"></span><span style="--k: 0.195; --q: -0.981"></span><span style="--k: 0.065; --q: -0.998"></span>
</div>

CSS

.ldr-plucked-string {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: flex;
  align-items: center;
  width: calc(var(--s) * 2);
  height: var(--s);
}
.ldr-plucked-string::before,
.ldr-plucked-string::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--s) / 6);
  left: calc(var(--s) / -12);
  width: calc(var(--s) / 12);
  height: calc(var(--s) / 3);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-plucked-string::after {
  left: auto;
  right: calc(var(--s) / -12);
}
.ldr-plucked-string span {
  flex: 1;
  height: calc(var(--s) / 16);
  margin: 0 calc(var(--s) / -120);
  background: var(--c);
  animation: ldr-plucked-string-pluck 2.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.ldr-plucked-string span:first-child { border-radius: var(--s) 0 0 var(--s); }
.ldr-plucked-string span:last-child { border-radius: 0 var(--s) var(--s) 0; }
@keyframes ldr-plucked-string-pluck {
  0%        { transform: translateY(0) rotate(0deg); }
  14%       { transform: translateY(calc(var(--k) * var(--s) * -0.3)) rotate(calc(var(--q) * -27deg)); }
  20%       { transform: translateY(calc(var(--k) * var(--s) * -0.3)) rotate(calc(var(--q) * -27deg)); }
  24%       { transform: translateY(calc(var(--k) * var(--s) * 0.26)) rotate(calc(var(--q) * 23.4deg)); }
  28%       { transform: translateY(calc(var(--k) * var(--s) * -0.2)) rotate(calc(var(--q) * -18deg)); }
  32%       { transform: translateY(calc(var(--k) * var(--s) * 0.15)) rotate(calc(var(--q) * 13.5deg)); }
  36%       { transform: translateY(calc(var(--k) * var(--s) * -0.1)) rotate(calc(var(--q) * -9deg)); }
  40%       { transform: translateY(calc(var(--k) * var(--s) * 0.065)) rotate(calc(var(--q) * 5.85deg)); }
  44%       { transform: translateY(calc(var(--k) * var(--s) * -0.035)) rotate(calc(var(--q) * -3.15deg)); }
  48%       { transform: translateY(calc(var(--k) * var(--s) * 0.015)) rotate(calc(var(--q) * 1.35deg)); }
  52%, 100% { transform: translateY(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-plucked-string, .ldr-plucked-string *, .ldr-plucked-string::before, .ldr-plucked-string::after, .ldr-plucked-string *::before, .ldr-plucked-string *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Plucked String Loader

HTML

CSS

Customizing this loader

Similar loaders