20 CSS Loaders 17 / 20

CSS Staircase Step Loader

Three step-progression CSS loaders — a cascading staircase bar chart, a 3×3 pulsing grid, and a multi-bar equaliser — representing data loading, task processing, and multi-step upload flows.

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-17">
  <div class="ld-17__stage">
    <div class="ld-17__cell"><div class="ld-17__stairs"><div class="ld-17__step"></div><div class="ld-17__step"></div><div class="ld-17__step"></div><div class="ld-17__step"></div><div class="ld-17__step"></div></div>
.ld-17,.ld-17 *,.ld-17 *::before,.ld-17 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-17{
  --bg:#0f1923;--c1:#f0db4f;--c2:#e8834a;--c3:#4ecdc4;--c4:#ff6b6b;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-17__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-17__cell{display:flex;flex-direction:column;align-items:center;gap:24px}
.ld-17__label{color:rgba(255,255,255,.35);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Staircase ascending */
.ld-17__stairs{display:flex;gap:4px;align-items:flex-end;height:60px}
.ld-17__step{width:12px;border-radius:2px 2px 0 0;animation:ld-17-step 1.4s ease-in-out infinite}
.ld-17__step:nth-child(1){height:10px;background:var(--c1);animation-delay:0s}
.ld-17__step:nth-child(2){height:20px;background:var(--c2);animation-delay:.15s}
.ld-17__step:nth-child(3){height:32px;background:var(--c3);animation-delay:.3s}
.ld-17__step:nth-child(4){height:44px;background:var(--c4);animation-delay:.45s}
.ld-17__step:nth-child(5){height:56px;background:var(--c1);animation-delay:.6s}
@keyframes ld-17-step{0%,100%{opacity:.3;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}}

/* Tetris-style blocks */
.ld-17__tetris{width:60px;height:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ld-17__block{border-radius:3px;background:rgba(255,255,255,.06);animation:ld-17-block 2.1s ease-in-out infinite}
.ld-17__block:nth-child(1){animation-delay:0s;background:rgba(240,219,79,.12)}
.ld-17__block:nth-child(2){animation-delay:.14s}
.ld-17__block:nth-child(3){animation-delay:.28s;background:rgba(78,205,196,.12)}
.ld-17__block:nth-child(4){animation-delay:.42s}
.ld-17__block:nth-child(5){animation-delay:.56s;background:rgba(255,107,107,.12)}
.ld-17__block:nth-child(6){animation-delay:.70s}
.ld-17__block:nth-child(7){animation-delay:.84s;background:rgba(240,219,79,.12)}
.ld-17__block:nth-child(8){animation-delay:.98s}
.ld-17__block:nth-child(9){animation-delay:1.12s;background:rgba(78,205,196,.12)}
@keyframes ld-17-block{0%,100%{opacity:.15}50%{opacity:1;transform:scale(1.05)}}

/* Equalizer */
.ld-17__eq{display:flex;gap:5px;align-items:center;height:60px}
.ld-17__eq-bar{width:10px;border-radius:5px;background:var(--c3);animation:ld-17-eq 1s ease-in-out infinite}
.ld-17__eq-bar:nth-child(1){animation-delay:0s}
.ld-17__eq-bar:nth-child(2){animation-delay:.1s;background:var(--c4)}
.ld-17__eq-bar:nth-child(3){animation-delay:.2s}
.ld-17__eq-bar:nth-child(4){animation-delay:.3s;background:var(--c1)}
.ld-17__eq-bar:nth-child(5){animation-delay:.4s}
@keyframes ld-17-eq{0%{height:8px}25%{height:40px}50%{height:20px}75%{height:55px}100%{height:8px}}

@media(prefers-reduced-motion:reduce){
  .ld-17__step,.ld-17__block,.ld-17__eq-bar{animation:none}
}

How this works

The staircase uses five bars at increasing heights (10px, 20px, 32px, 44px, 56px) set as inline height values. Each bar runs an opacity + scaleY keyframe with cascading 0.15s delays, so the wave of activity moves left to right across the ascending bars like a progress sweep. The bars are aligned at flex-end so the scaling originates from the bottom baseline.

The 3×3 grid uses CSS Grid with nine equal cells, each pulsing their background colour between near-transparent and a highlight colour through sequential delays. The delay cascade follows reading order (left-to-right, top-to-bottom) but the 0.14s step creates a diagonal ripple pattern because adjacent rows are only slightly offset. The equaliser uses random initial heights in combination with a scaleY animation that hits different peak heights per bar, controlled by the keyframe's percentage stops rather than individual properties.

Customize

  • Increase staircase step count by adding more bars and extending the delay ladder — keep the height increment consistent (e.g. 12px per step) for a clean geometric progression.
  • Change the grid ripple direction by reversing the delay order — applying the highest delay to nth-child(1) and lowest to nth-child(9) creates a right-to-left wave instead.
  • Style the grid cells differently per column using nth-child(3n+1) selectors to create striped column colouring.
  • Adjust equaliser bar peak heights by editing individual height values in the @keyframes ld-17-eq rule — use different peaks per bar with separate keyframe names for a chaotic visualiser effect.
  • Add a floor baseline to the staircase by adding border-bottom: 2px solid rgba(255,255,255,.1) to the flex container for a graph-axis aesthetic.

Watch out for

  • Bars using align-items: flex-end scale from the bottom as expected — if you switch to align-items: center, bars will scale from their midpoint and the staircase effect breaks.
  • The grid cells use transform: scale(1.05) at peak opacity — ensure the grid container has no overflow: hidden, or the scale clipping will create sharp edges on outer cells.
  • The equaliser keyframe uses absolute height values — unlike scaleY, this causes layout reflow. Acceptable for demo use; swap to scaleY + transform-origin: bottom for production performance.

Browser support

ChromeSafariFirefoxEdge
49+ 9+ 44+ 49+

All step-loader techniques are universally supported using standard CSS animations and transforms.

More from 20 CSS Loaders

CSS Gradient Conic SpinnerCSS Particle Burst LoaderCSS Spinning Ring LoaderCSS Dot Chase LoaderCSS Skeleton Screen LoaderCSS Progress Bar LoaderCSS Bouncing Balls LoaderCSS DNA Helix 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 →