20 CSS Loaders
06 / 20

All 20 in 20 CSS Loaders

  1. 01CSS Spinning Ring Loader
  2. 02CSS Dot Chase Loader
  3. 03CSS Skeleton Screen Loader
  4. 04CSS Progress Bar Loader
  5. 05CSS Bouncing Balls Loader
  6. 06CSS DNA Helix Loader
  7. 07CSS Glitch Flicker Loader
  8. 08CSS Heartbeat Pulse Loader
  9. 09CSS Circular Progress Loader
  10. 10CSS Liquid Fill Loader
  11. 11CSS Neon Arc Spinner
  12. 12CSS Cube Flip 3D Loader
  13. 13CSS Wave Bars Audio Loader
  14. 14CSS Morphing Square Loader
  15. 15CSS Orbit Planet Loader
  16. 16CSS Typing Dots Loader
  17. 17CSS Staircase Step Loader
  18. 18CSS Infinity Loop Loader
  19. 19CSS Gradient Conic Spinner
  20. 20CSS Particle Burst Loader
Pure CSSMIT licensed

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.

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.

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

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;
  }
}
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 Loader 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 DNA Helix Loader
Source: https://codefronts.com/motion/css-loader-designs/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.
## HTML
```html
<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>
```
## CSS
```css
.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.

Make it yours

  • 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.

Gotchas — read before shipping

  • 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.

Techniques used in this demo

@keyframesMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →