Loading screen
A full-screen overlay showing your brand while the first page loads. Off by default in the theme; on in the demo setup.
| Setting | What it controls | Default |
|---|---|---|
| Show a loading screen | Whether the overlay shows at all. | Off |
| Logo plate | The colour of the panel behind the wordmark. | White |
| Ground colour | The colour behind the plate. | Page background |
| Logo width | How wide the mark is. | 240 px |
| On screen for | How long the overlay stays before clearing. | 2000 ms |
| Frequency | Whether it shows every visit or only the first. | Once per visit |
Should you use one?
Section titled “Should you use one?”Be honest about the trade. A loading screen makes an entrance and reinforces the brand — and it delays the first thing the shopper came for.
It suits a drop launch where arrival is part of the experience. It suits a returning-customer store much less, where it becomes a toll on every visit.
Set Frequency to show it once if you use it at all.
On screen for
Section titled “On screen for”Below about 1600 ms every value behaves the same, because the exit animation has a fixed minimum — which is why the slider starts there. Around 2000 ms is a good default: long enough to register, short enough not to annoy.
Logo width
Section titled “Logo width”Sets the width of the mark; its height follows at half that. The default suits a wide wordmark. A square or tall logo will come out smaller than you expect — set the width to roughly double what you want the height to be.
If it looks wrong
Section titled “If it looks wrong”It does not show. Motion is off — the loading screen is part of the motion system — or Frequency is set to once and you have already seen it this visit. Try a private window.
My logo looks small. Its height is half the width you set. Raise the width.
It feels slow. Lower the duration, or switch it off. On a fast connection the overlay is the wait.