Exhibit / touch it

The loading-bar wing

For a few years the first thing most people saw of a web game was a bar filling up. This wing shows eight ways to dress the wait, all drawn from scratch for Eracade, and lets you build a ninth.

Why the wait got a face

A web game had to be downloaded before it could be played, and in the years covered by the museum’s fourth and fifth halls, a download could take anything from several seconds to a minute. Staring at a blank page for that long felt like a fault, so developers learned to show the wait. A bar that fills tells you something is happening and roughly how much is left. A spinning thing says the same without the arithmetic. A joke makes the time go faster.

The screen that did this work was called a preloader. It was a tiny program that loaded first, drew itself immediately, and watched the real download while it ran. That made it the one part of a game every player was sure to see, and a good place for a sponsor’s logo, a tip, a dash of personality or an elaborate animation. The best ones were small works of design. The cheapest ones were a rectangle that jumped from 0 to 100.

Below, each style is drawn with plain shapes and a little script, and driven by a pretend download that stalls a little near the end, because that is when real ones did. The figures are not measuring anything. They are decoration, and being honest about that is part of the history.

Motion. The gallery is still unless you switch motion on, and starts still if your system asks for reduced motion. Even with motion on, nothing flashes; the fastest thing here is a gentle bounce. The tips reel only advances by itself while motion is on, and has a button for stepping through it by hand.

Enable motion

Motion is off. Each style shows a still frame at 64%.

1. Glossy pill. The default look of the glossy years. A highlight across the top and a gradient made the bar look like a physical tube filling up. It borrowed its polish from interface design of the time and quietly said: this site has a budget.

2. Segmented LED. Twenty chunks lighting one at a time. Segments make progress countable, which feels more trustworthy than a smooth fill, and they recall the level meters on hi-fi equipment that designers admired.

3. Spinning gear. A spinner does not claim to know how much is left. It only promises that work is happening. This was the choice when the real size of a download was unknown, or when designers wanted to keep the screen calm.

4. Filling liquid. A flask, a wave and a rising level. Skeuomorphism in motion: the bar became a thing you could imagine pouring. It was more work than a bar and looked like it, which was the point.

5. Bouncing dots. Three dots, one rhythm. Tiny to draw, tiny to download, and readable at a glance. It became the shorthand for waiting everywhere, long after the plugin it came from went away.

6. The chatty percentage. A line of text that names the current job, “Loading sounds…”, with a number beside it. Naming the work turned a wait into a short story, and the number gave people something to quote when the bar stuck.

7. The tips reel. Rotating advice, half useful and half a joke. Tips gave the eye something to read and let designers show personality. This one only turns by itself while motion is on; you can step through it by hand.

8. Skip the ad. Sponsor screens counted down and then offered a button to skip. Ours has no sponsor and nothing to skip. Press it. It does not mind.

Build your own

Style

Colour #9be65a

Speed5

Use as my Eracade loading screen

The choice is saved in this browser only, under the name loaderStyle. The cabinet does not read it yet; when it does, the setting will already be there.

With respect to the people who made, and kept, these

The loading screens above are our own work, but the habit behind them belongs to thousands of designers and developers who built games and animations in the plugin years, mostly by themselves and mostly for free. Many of those works were lost when sites closed or the plugin was retired. Volunteers have spent years finding them, cataloguing them and building ways to run them again. If you want to see the real thing, not our tribute, please visit their work:

Flashpoint Archive A community project that collects and preserves web games and animations.
Ruffle An open-source player that runs old plugin content in modern browsers.
Internet Archive A library of the web and much of what was on it.

Eracade hosts only its own work. We do not copy other people’s games, and the museum uses no screenshots or assets from any of them.