∞ forever components

Retro & Glitch

8-bit loading bar

Pixel-art loading screen with a 16-segment green-to-red progress bar, bobbing sprite, dot-animated "NOW LOADING" text, and yellow percent counter. Auto-loops.

canvasmedium complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Retro/game-themed loading states, splash screens, chiptune or nostalgia-aesthetic sites.

When not to

Production loading indicators tied to real async progress — bar runs on a fixed random increment loop, not actual load events.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the sprite color from pink to yellow (#ffe23f), increase segment count to 24 by editing segs=24, and slow the fill speed by changing the increment from 0.6+Math.random()*1.4 to 0.3+Math.random()*0.7.

Safe to edit

  • segment count (segs=16)
  • fill speed (0.6+Math.random()*1.4)
  • sprite color (#ff5f8f)
  • bar color gradient (hue 120→0)
  • title text ('NOW LOADING')

Keep intact

  • imageSmoothingEnabled=false (keeps pixel-art crisp)
  • visibilitychange pause/play
  • reduce guard around animation increment

Known limitations

  • Canvas is fixed 200x200 logical pixels — scaled via CSS width:100%; very large viewports will look blurry despite pixelated rendering
  • No real progress hook — must replace p increment with actual load event for production use

retro8-bitpixel-artloadingprogress-barcanvasgame-ui

More Retro & Glitch components

  • CRT scanline screenGreen-phosphor CRT terminal: rolling CSS scanlines, vignette, glowing oscilloscope wave, blinking boot-text rows, and random canvas glitch flashes.
  • VHS tracking distortionVHS test-pattern color bars with 46-slice horizontal jitter, random tear events, a rolling tracking bar, and chroma-split REC text on a dark vermillion…
  • Pixel-art sprite marchThree rows of 8x8 two-frame pixel sprites march across a scrolling starfield at varying speeds; pointer horizontal position controls march speed.
  • ASCII shimmerGrid of ASCII ramp characters shimmers through interfering radial and plasma waves in green-teal hues; character density and wave center follow the pointer.
  • Dot-matrix tickerAmber LED dot-matrix marquee scrolling GAME OVER / INSERT COIN / HIGH SCORE across a dim dot grid. Custom 5x7 bitmap font with pulsing brightness per column.
  • Neon arcade signPink neon ARCADE sign with CSS flicker animations and a yellow chasing-light marquee around a glowing pink border frame.