20 CSS Loaders17 / 20

Pure CSSMIT licensed

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.

Published

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.

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

Make it yours

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

Gotchas — read before shipping

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

Techniques used in this demo

grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →