OneTaskBy Tim King · Updated
Loading Screen Generator
Full-Page Preloader HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Loading Screen Generator works
A loading screen covers the page while images, fonts and scripts arrive, then fades away to reveal the finished layout. This loading screen generator gives you the overlay, a spinner, dots or bar, and the few lines of script that remove it when the browser fires the load event.
The output has three parts: a style block for the head, the overlay markup to place first in the body, and a script for the end of the body. The styles are inline in the head so the overlay is painted on the very first frame, before any external stylesheet has downloaded.
How the loading screen knows when to go
The script waits for the window load event, which fires once every image, stylesheet, font and
script in the HTML has finished. It then adds an is-done class that fades the overlay to zero
opacity, and removes the element from the page when the fade ends, so it can never block clicks.
The overlay uses visibility: hidden as it fades, which also takes it out of keyboard focus.
Minimum display time
A loader that flashes for 80 milliseconds looks like a glitch. If your page usually loads fast, set a minimum display time of 500 to 800 ms so the animation is seen as intentional. Leave it at zero if you would rather show the page the moment it is ready.
Accessibility
The overlay has role="status" and an accessible name, so screen readers announce that the page
is loading. Visitors who ask their system for reduced motion get a much slower animation rather
than a still one, so there is still a sign that something is happening.
FAQ
Is a loading screen bad for page speed scores?
It can be. Core Web Vitals measure when the main content becomes visible, and an overlay that waits for the load event hides that content for longer. Use a loading screen for app-like pages that are unusable half-loaded, and skip it on content pages where readers can start early.
What if JavaScript is disabled or fails?
The overlay would stay up and hide the page. To guard against that, add a noscript block in the
head containing <style>.loader{display:none}</style>, so visitors without JavaScript never see
the loading screen at all.
Can I use my logo instead of the brand name?
Yes. Replace the brand paragraph with an <img> or an inline SVG. Keep the logo small, or inline
it as a data URI, because the load event waits for it and a heavy logo delays the fade.
How do I show the loading screen on single-page app route changes?
Remove the is-done class to show the overlay again and add it back when the new view has
rendered. Because the script deletes the element after the first fade, change the removal line to
leave it in place if you plan to reuse it.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Loading Spinner
Design a CSS loading spinner and copy the code.
Progress Bar Generator
Generate a linear, striped, animated or circular CSS progress bar and copy the code.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.
Coming Soon Page Generator
Launch page with countdown timer and email signup, as one HTML file.
404 Page Generator
Custom "page not found" HTML page with home link and search.