A Loading Bar That Never Finishes
The story behind The Loading Bar
Inspired by Adobe Flash on Wikipedia
Built with Canvas 2D · CSS Animations · DOM
Techniques Phased State Machine · Particle Decay System · Glitch Artifacts · Ghosting Trail Effect
Direction Build a loading bar that never reaches 100%, then let the user disturb the ruins of what was loading — Flash-colored fragments that spawn, decay, and dissolve into static
Result A three-phase elegy: a stuck loading bar with anxious jitter, a glimpse phase where mouse movement summons colorful Flash-era shapes that immediately start dying, and a final “plugin not supported” tombstone
The Story
In January 2021, Adobe Flash Player was officially discontinued. Browser support was removed. The plugin was blocked. Billions of SWF files went dark overnight.
At its peak, Flash was installed on 99% of internet-connected desktop computers. It powered Homestar Runner, Newgrounds, countless dress-up games, Badger Badger Badger, and an entire generation’s first creative experiments. Flash was the first tool that made the web feel alive — before it, the internet was mostly text and images. After it, the internet was everything.
The RIAA didn’t kill Flash. Apple did, in a 2010 open letter arguing that HTML5 would replace it. They were right. But being right didn’t bring back the millions of experiences that died when the plugin was finally pulled.
What does it feel like to watch something load forever? To wait for content that will never arrive?
The Take
We treat digital permanence as a given. Upload something to the internet and it exists forever, we assume. But Flash proved the opposite: an entire medium can be switched off. Not gradually abandoned — switched off. One day it works, the next day every browser refuses to run it.
The loading bar is the perfect symbol. We’ve all stared at one. We’ve all felt that specific anxiety when it stalls at 63%, 78%, 89% — close enough to completion that you keep waiting. You refresh. You wait more. It’s a tiny exercise in hope management.
But what if the loading bar was never going to finish? What if the content behind it no longer exists in any form a browser can render? The wait becomes permanent. The progress becomes meaningless.
Move your cursor and you disturb the ruins. Colorful shapes appear — stars, character heads, game blocks, arrows, abstract blobs — drawn in the saturated palette of Flash-era web design. They’re beautiful for a moment. Then they decay. They shed pixels. They glitch. They dissolve into static.
You can’t save them. You can only briefly summon them before they’re gone.
The Tech
The Loading Bar is a Canvas 2D experience built with a four-phase state machine: loading, glimpse, decay, and end.
The loading bar itself is surprisingly complex for a fake progress indicator:
- Spring-damped motion: Progress follows a target value through velocity accumulation with 0.9 damping, creating that anxious wobble real loading bars have
- Stall mechanics: Random stalls freeze progress for 0.5–2 seconds with tiny jitter, then release with a small jump forward
- Regression: 15% chance of slipping backward slightly, 10% chance of spiking toward 75–89%, but never reaching 90%
- DOM animation: CSS gradient fill with an animated shine sweep and a glow pulse on the container
When the user first moves their mouse, the loading screen fades and the glimpse phase begins. Mouse movement spawns Flash-era content fragments:
- Five shape types: Circle heads with dot eyes, five-pointed stars, highlighted game blocks, directional arrows, and wobbling abstract blobs
- Flash color palette: 14 saturated colors from the classic Flash era — pure reds, greens, blues, magentas
- Glitch blocks: 30% chance per fragment of spawning corruption rectangles that jitter horizontally
- Gravity particles: Each fragment sheds 2×2 to 6×6 pixel squares that fall with gravity accumulation
The decay phase accelerates fragment death. Each fragment’s opacity decay rate scales with 1 + decayProgress * 2, so the longer you play, the faster everything dies. When a fragment’s opacity hits zero, it bursts into 10 final particles — a tiny funeral.
The canvas clears with rgba(0, 0, 0, 0.1) each frame instead of full black, creating a ghost trail effect where shapes linger as afterimages before fading completely.
When decay progress exceeds 1.0, the end phase triggers: the canvas dims to 30% opacity and the “Adobe Flash Player is no longer supported” message fades in — the real browser error message, pixel-perfect, complete with the grey puzzle piece icon.
The Experience
Wait for the loading bar. Watch it crawl toward a finish line it will never cross.
Then move. Colorful shapes appear around your cursor — fragments of games, animations, interactive toys. They spin slowly, trailing pixel dust. They glitch. They dissolve.
The more you move, the more you summon. But the more you summon, the faster everything decays. The canvas fills with dying color, then empties. Static creeps in from the edges.
Eventually, everything is gone. The plugin is no longer supported. This content cannot be displayed.
On mobile, drag your finger to disturb the ruins. The touch response is the same — brief, beautiful, terminal.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.