Design a seamless full-screen loading experience that bridges the gap between your PWA's native OS splash screen and the moment your JavaScript framework actually boots up.
Your Javascript framework has successfully mounted.
When a user launches an installed PWA from their home screen, the OS (iOS or Android) shows a native splash screen based on your Web App Manifest. However, the exact moment the browser engine loads, the native splash screen vanishes. If your React, Vue, or Angular bundle hasn't finished executing yet, the user is suddenly staring at a blank white screen. A full-screen CSS loading screen bridges this gap seamlessly.
Place the generated CSS directly into a <style> tag in the <head> of your index.html. Place the HTML snippet directly inside the <body>, placing it exactly adjacent to your main framework mount point (e.g., right next to <div id="root"></div>).
The CSS includes a .hidden class that fades the loader out and removes pointer events. You just need to execute the provided JavaScript snippet (document.getElementById('pwa-loader').classList.add('hidden');) inside your framework's primary "on mount" lifecycle hook (like useEffect in React, or onMounted in Vue). If your app still hasn't fully loaded, you can then use shimmer placeholder skeletons.
Progressier automatically configures your manifest, service worker, icons, and splash screens.
Generate PWA See plans