Back to library
INTERACTION_025

Scanning Line.

A 1px gradient rule travels top to bottom on loop inside a clipped surface, signalling activity without a spinner.

CATEGORY
Loading
COMPLEXITY
Easy
TECH
CSS
PLATFORM
Both
PERFORMANCE
Light
LIVE PLAYGROUND
PROCESSING
CSS / CSS
.scan { position: relative; overflow: hidden; }
.scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: scan 4s linear infinite;
}
@keyframes scan {
  0% { transform: translateY(0); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateY(var(--h, 240px)); opacity: 0; }
}

IF YOU LIKE THIS, STEAL THESE TOO.

INTERACTION_026CSS

Skeleton Loader

Shape-accurate placeholders with a moving sheen.

Loading / LightView
GLASS / SURFACE

Blur 24px · edge light

INTERACTION_010CSS

Glass Panel

Heavy dark glass with an inner edge highlight.

App UI / MediumView
STRUCTURE / 56PX
INTERACTION_023CSS

Tech Grid

Faint technical grid with a radial fade.

Background / LightView
TEXTURE / 3%
INTERACTION_024CSS

Grain Overlay

Film grain that stops black from looking flat.

Background / LightView