Phaser home
Log inCreate a game

← Expansion packsLook

Phaser AE

Loading screen

Free packv3.0.0-52D and 3DLook

A loading screen that looks after itself. While the game's first files arrive, a gradient bar fills on the game's own background colour, so the loader and the first frame meet without a flash, and a failed file stays on screen with Retry until it lands.

This is a Free pack. Every phaser.io account can use it in their games.

Released October 14, 2026 · updated October 19, 2026

Loading screen: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

What it does

WebGPU, WebGL2 and automatic renderer packs install the screen by default. It covers the preload, everything the game loads before its first scene enters: images, JSON, models, sounds being decoded, and any work of your own you wrap with game.assets.track. Loads started after the first scene are silent, so the first play of a sound or a music track never brings the screen back mid-game. When you want a loading screen later, between chapters say, you put one up on purpose with run or show.

The bar fills with a gradient laid along its whole length, so filling reveals it, with a soft glow under the fill and a point of light at its leading edge that sheds little square pixels as it moves and a burst of them when it lands. Everything sits in the middle of the game's box and is sized from its shorter side, so it looks the same on a phone held upright and on a desktop. The bar never moves backwards, several loads at once share one screen, and a load that finishes almost at once never flashes it.

It is made of page elements rather than GPU textures, so it works in 2D and 3D, on WebGPU and WebGL2, before game.start() and while the renderer is still choosing its device, without engine frames or atlas space. The game does not become ready until the screen has faded, so nothing drives a game still hidden behind it.

Features

  • Automatic over the preload — shown by itself for the files loaded before the first scene, and only then.
  • No flash — a short delay before it appears, a minimum time once it does and a fade when it goes.
  • One bar for every job — concurrent loads share one screen whose fill never moves backwards.
  • Failures handled — the bar turns red, "Something didn't load" shows, and Retry tries the failed files again while Continue plays on without them.
  • On purpose, later — run puts up a screen for a load between levels, with an optional title line above the bar, and show puts one over a job you started yourself.
  • Your own work counted — game.assets.track adds custom preparation, such as building a level, to the bar.
  • Restyled with a few values — bar size, fill colour or any CSS background, track, border, text colour, font and background, with ink that suits a light or a dark background.
  • Reduced motion respected — no sparks, shimmer or easing for players who ask for less movement.

Good for

  • Any web game with assets to fetch — a loading screen from the first build, with nothing to write.
  • Games with big levels or music — a deliberate screen between chapters, shown even for a fast load.
  • Games on unreliable connections — a failed file stays visible with Retry instead of a game that silently breaks.
  • Games with their own loading art — automatic: false hands the preload to your own UI, using the exported fill maths.
  • Any renderer, 2D or 3D — it shows before the first engine frame, even while the renderer chooses its device.

Make it yours

The pack's options, or game.preloader.configure, set automatic, delay (0.12 seconds), minTime (0.4 seconds), fadeOut (0.3 seconds), the background (by default the game's own) and a style: the bar's width and height, its fill (a colour that becomes a gradient from a lighter tint, with sparks to match, or any CSS background), track, border, text, fail, font, a title and an opt-in showKey asset label. run also takes the loader's retry and concurrency options.

Two very different uses: a game that does nothing at all and gets the automatic cyan, violet and pink bar over its preload; and a story game that turns the automatic screen off for its own title art, then calls run between chapters with the title "Preparing the next chapter" and a teal fill held up for at least 0.6 seconds.

A quick look

Load everything before the game starts, then put up a screen on purpose later:

const job = game.assets.load([
    { kind: 'image', key: 'tiles', url: '/tiles.png' },
    { kind: 'audio', key: 'theme', url: '/theme.mp3', stream: true },
]);
await job;
if (!job.ok) throw new Error('Required assets could not be loaded');
await game.start();
const next = game.preloader.run(items, {
    minTime: 0.6, style: { title: 'Preparing the next chapter', fill: '#65e4dc' },
});

Works with

Good to know

  • Progress counts finished items, decoding included, not bytes.
  • It does not pause the simulation, unlock audio or change scenes: audio still needs the player's first gesture.
  • Fetches made outside the engine's loaders show only if they go through game.assets.track.
  • The screen is a page overlay, so it is not in canvas screenshots or recordings; headless, loads settle with nothing shown.
  • Continue does not retry: check the job's ok and failed before entering a scene that needs those files.

More Look packs

Show all →