Pick a style (ring, dots, bar or pulsing logo), colours and optional text. The generator outputs a snippet to paste right after <body>: it covers the screen immediately and fades out once the page has loaded — or when your code calls hideLoader() after your data is ready.
Loading screen vs splash screen
Android shows the app's own splash (icon on a colour) while the app process starts. Your page then needs a moment to render and maybe fetch data. This loading screen covers that second gap with the same colour, so launch feels like one smooth step. Builders such as HTML2APK also offer native page loaders and, on Pro, a native splash screen — use whichever fits; don't stack three.
Tips
- Use your theme colour as the background so the transition from the native splash is seamless.
- Choose My code calls hideLoader() if the first screen depends on data, and call it after rendering — the 8-second safety net prevents a stuck screen.
- Keep it under a second for bundled apps; a long loader feels slow.
Frequently asked questions
Will this slow down my app?
No. It is inline CSS and a few lines of JavaScript, and it is removed from the page as soon as it fades.
Can I use my logo image?
Yes — replace the indicator element with an of a bundled logo file, and keep the animation on the image.