20 CSS Loaders 06 / 20

CSS DNA Helix Loader

Three organic helix and spiral CSS loaders — a pulsing DNA ladder with rungs, a glowing helix ring stack, and a spiralling orbit chain — creating bio-tech and data-processing aesthetics.

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="ld-06">
  <div class="ld-06__stage">
    <div class="ld-06__cell">
      <div class="ld-06__dna">
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
      </div>
.ld-06,.ld-06 *,.ld-06 *::before,.ld-06 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-06{
  --bg:#020c1b;--c1:#00d2ff;--c2:#ff6b9d;--c3:#a8ff78;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-06__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-06__cell{display:flex;flex-direction:column;align-items:center;gap:20px}
.ld-06__label{color:rgba(255,255,255,.4);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* DNA Helix */
.ld-06__dna{display:flex;flex-direction:column;gap:3px;align-items:center}
.ld-06__rung{display:flex;gap:4px;align-items:center}
.ld-06__rung span{width:10px;height:10px;border-radius:50%}
.ld-06__rung span:nth-child(1){background:var(--c1)}
.ld-06__rung span:nth-child(2){background:rgba(255,255,255,.1);flex:1;height:2px;border-radius:1px}
.ld-06__rung span:nth-child(3){background:var(--c2)}

.ld-06__rung:nth-child(1){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:0s}
.ld-06__rung:nth-child(2){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.1s}
.ld-06__rung:nth-child(3){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.2s}
.ld-06__rung:nth-child(4){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.3s}
.ld-06__rung:nth-child(5){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.4s}
.ld-06__rung:nth-child(6){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.5s}
.ld-06__rung:nth-child(7){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.6s}
.ld-06__rung:nth-child(8){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.7s}
@keyframes ld-06-dna{0%,100%{transform:scaleX(1);opacity:.6}50%{transform:scaleX(.3);opacity:1}}

/* Helix ring stack */
.ld-06__helix{width:50px;height:80px;position:relative}
.ld-06__helix span{position:absolute;left:50%;border-radius:50%;transform:translateX(-50%);animation:ld-06-helix 1.5s ease-in-out infinite}
.ld-06__helix span:nth-child(1){width:40px;height:10px;background:var(--c1);top:0;animation-delay:0s}
.ld-06__helix span:nth-child(2){width:30px;height:9px;background:var(--c2);top:12px;animation-delay:.1s}
.ld-06__helix span:nth-child(3){width:16px;height:8px;background:var(--c1);top:23px;animation-delay:.2s}
.ld-06__helix span:nth-child(4){width:8px;height:8px;background:var(--c3);top:34px;animation-delay:.3s}
.ld-06__helix span:nth-child(5){width:16px;height:8px;background:var(--c2);top:45px;animation-delay:.4s}
.ld-06__helix span:nth-child(6){width:30px;height:9px;background:var(--c1);top:56px;animation-delay:.5s}
.ld-06__helix span:nth-child(7){width:40px;height:10px;background:var(--c2);top:68px;animation-delay:.6s}
@keyframes ld-06-helix{0%,100%{opacity:.3}50%{opacity:1;box-shadow:0 0 12px currentColor}}

/* Spiral */
.ld-06__spiral{width:60px;height:60px;position:relative}
.ld-06__spiral span{position:absolute;width:8px;height:8px;border-radius:50%;animation:ld-06-spiral 2s linear infinite}
.ld-06__spiral span:nth-child(1){background:var(--c1);animation-delay:0s}
.ld-06__spiral span:nth-child(2){background:var(--c2);animation-delay:-.25s}
.ld-06__spiral span:nth-child(3){background:var(--c3);animation-delay:-.5s}
.ld-06__spiral span:nth-child(4){background:var(--c1);animation-delay:-.75s}
.ld-06__spiral span:nth-child(5){background:var(--c2);animation-delay:-1s}
.ld-06__spiral span:nth-child(6){background:var(--c3);animation-delay:-1.25s}
.ld-06__spiral span:nth-child(7){background:var(--c1);animation-delay:-1.5s}
.ld-06__spiral span:nth-child(8){background:var(--c2);animation-delay:-1.75s}
@keyframes ld-06-spiral{0%{transform:rotate(0deg) translateX(24px) scale(.4);opacity:0}20%{opacity:1;transform:rotate(72deg) translateX(24px) scale(.7)}60%{transform:rotate(216deg) translateX(24px) scale(1)}80%{opacity:1}100%{transform:rotate(360deg) translateX(24px) scale(.4);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .ld-06__rung,.ld-06__helix span,.ld-06__spiral span{animation:none}
}

How this works

The DNA ladder renders each rung as a flex row: two coloured span dots flanking a thin flex:1 connector line. Each rung runs scaleX from 1 to 0.3 and back with staggered animation-delay, so the rungs appear to twist in depth as if the helix is rotating away from the viewer — a 2D illusion of 3D rotation with zero perspective transforms.

The helix ring stack uses seven absolutely positioned ellipses whose widths range from 8px at the centre to 40px at the edges, mimicking the foreshortening of a viewed helix. Each ellipse pulses opacity and a box-shadow glow in sequence. The spiral orbit places eight dots on a rotating container using rotate(deg) translateX(radius) transforms, each fading in and out with scale to simulate depth on the spiral path.

Customize

  • Increase the DNA rung count by adding more .ld-06__rung divs and extending the nth-child delay ladder in .1s increments.
  • Change the helix colour pair by swapping --c1 and --c2 — a teal + amber combination reads as a chemical compound aesthetic.
  • Adjust the rung connector opacity from rgba(255,255,255,.1) to .25 for more visible rungs on lighter backgrounds.
  • Slow the spiral orbit by increasing its animation-duration from 2s to 4s for a more hypnotic planetary feel.
  • Add filter:blur(1px) to far-end helix rings (the narrow ones) to enhance the depth-of-field illusion without any 3D transforms.

Watch out for

  • The DNA scaleX trick only reads as rotation if the rung widths are wide enough — below 40px the effect becomes imperceptible; keep rungs at least 50px wide.
  • The helix ring stack relies on pixel-exact widths per nth-child; using percentage widths breaks the foreshortening illusion since the parent container has a fixed size.
  • Safari applies box-shadow transitions on pseudo-elements differently from children — if shadows don't animate, move the glow to a real element.

Browser support

ChromeSafariFirefoxEdge
49+ 9+ 44+ 49+

All effects use standard CSS properties; the scaleX rotation illusion works universally.

More from 20 CSS Loaders

CSS Infinity Loop LoaderCSS Gradient Conic SpinnerCSS Particle Burst LoaderCSS Spinning Ring LoaderCSS Dot Chase LoaderCSS Skeleton Screen LoaderCSS Progress Bar LoaderCSS Bouncing Balls LoaderCSS Glitch Flicker LoaderCSS Heartbeat Pulse LoaderCSS Circular Progress LoaderCSS Liquid Fill Loader
View the full collection →

Search CodeFronts

Loading…

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