---
title: "A loading bar that lurches like a real one"
description: "Real loads stutter — a burst, a pause, a crawl at the end. This pure-CSS laser beam fakes that with a hand-tuned width track and two offset flickering glows. No JS. Pulled from basement.fun."
date: "2026-05-31"
tags: ["css", "animation", "loader", "frontend"]
---

The loading bar in [basement.fun](https://basement.fun) has personality, so I
pulled it out. It's pure CSS:

## Stutter, don't ramp

A bar that fills at a constant speed reads as fake, because nothing real loads
that smoothly. The trick is a hand-tuned `width` keyframe track that lurches:
fast at first, little pauses, then a crawl toward 100%.

```css
@keyframes beam-main {
  0% { width: 0%; }  5% { width: 10%; } 7.5% { width: 15%; }
  15% { width: 30%; } 30% { width: 45%; } 50% { width: 70%; }
  90% { width: 95%; } 100% { width: 100%; }
}
```

The uneven gaps between stops are the whole effect. Your eye reads the
hesitation as "work is happening."

## Two glows, two clocks

A laser needs to glow, but a single synchronized glow looks mechanical. So
there are two, deliberately out of phase: the bar's `box-shadow` flickers on a
1s loop, and a blurred dot pinned to the leading edge (an `::after`) flickers on
a 0.5s loop.

```css
.loading-beam {
  animation: beam-main 5s ease-out infinite,
             beam-shadow-flicker 1s linear 1s infinite;
}
.loading-beam::after {
  left: calc(100% - 0.5rem);
  filter: blur(1.5rem);
  animation: beam-after-flicker 0.5s linear infinite;
}
```

That mismatch is what makes it feel like a live beam instead of a CSS
transition. Three keyframe sets, one element plus its pseudo, zero JavaScript.

From [basement.fun](https://basement.fun), a project I work on at B3. Grab it on
the [Loading Beam](/components/loading-beam) page.