A loading bar that lurches like a real one

The loading bar in 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%.

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

.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, a project I work on at B3. Grab it on the Loading Beam page.