How to make splash screen with progress tracking in Angular?

📝 Preface

Loading all initialization data in an Angular application can sometimes take a while—especially over slow internet connections. Displaying a blank screen during this time can lead to a poor user experience.

To mitigate this, we can introduce a splash (or loading) screen to provide users with immediate visual feedback, making the app feel more responsive and polished.

🧪 Demo Project

The demo below showcases a working implementation of a splash screen:

⚡ Try this code on StackBlitz or GitHub

Should the Splash Screen Be a Component?

Short answer: ❌ no.

Here's why:

• Angular components aren’t rendered until after the framework bootstraps. This means any splash screen defined as a component would appear too late to be useful.

• Initialization tasks like HTTP requests should be handled in provideAppInitializer, before Angular even begins rendering the UI.

File: app/app.config.ts

⚡ View on StackBlitz

    provideAppInitializer(async () => {
      const initializers: AsyncInitializer[] = [
        inject(ConfigLoaderService),
        inject(ConnectionCheckerService),
        inject(StorageInitializerService),
        inject(TranslationLoaderService),
      ];

      for (const initializer of initializers) {
        await performAsyncInitialization(initializer);
      }

      await splashFadeOut();
    }),

For demonstration purposes, performAsyncInitialization() simulates a delay by waiting one second.

The splashFadeOut() function starts the fade-out animation and waits for it to complete.

🎨 Where Should Splash Screen Styles and Scripts Go?

You can embed splash screen styles and scripts directly inside the <app-root> tag in index.html. This ensures they appear instantly and can be easily removed once the app is initialized, leaving no residue behind.

File: index.html

⚡ View on StackBlitz

<app-root>
  <!-- START Splash screen -->

  <!-- Styles -->
  <style>
    [...]
  </style>

  <!-- Content -->
  <div class="splash-container" id="splash">
    <div class="circle-outline"></div>
    <svg>
      [...]
    </svg>
    <div class="loading-text">
      <span id="updater">Loading Angular app</span>
      <span class="jumping-dots">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </span>
    </div>
  </div>

  <!-- Place for scripts -->

  <!-- END Splash screen -->
</app-root>

If the splash screen code is large, consider moving styles and scripts into external files for better maintainability. However, this introduces a trade-off: additional HTTP requests will slightly delay the splash screen's appearance. Also, these files must reside in the public folder, increasing the final build size.

🔄 Can I Update the Splash Screen Dynamically?

Yes, you can dynamically modify the splash screen—for example, to show real-time progress updates.

To do this, reference a DOM element by its id and update its content during app initialization. Be mindful: both the HTML and Angular logic must reference the same id, so consistency is key.

File: index.html

⚡ View on StackBlitz

<span id="updater">Loading Angular app</span>

File: app/core/utils/splash-screen.utils.ts

⚡ View on StackBlitz

export function updateTitle(text: string): void {
  const elem = document.getElementById('updater');
  if (elem) {
    elem.textContent = text;
  }
}

📌 Bottom line

• Splash screens in Angular are not only possible—they're practical.
• Since Angular lacks a built-in solution, a custom inline approach is the most efficient and reliable.
• Keep splash logic minimal and inline, and ensure it is removed cleanly once the app is initialized.

🕒 What's Next (Advanced Topics)

To elevate this implementation and make it suitable for production-grade apps, here are some advanced areas worth exploring:

• ⚡ Optimize Splash Screen Load Time After First Load
  Cache initialization data (e.g. app config, feature flags) using LocalStorage or IndexedDB, so it can be reused without delay.

• 🛠️ Integrate with Service Worker for Offline & Fast Loads
  Ensure splash screen assets (HTML, images, inline styles) are cached by your Angular Service Worker.

Comments

[Nevo David]

Gotta say, seeing step-by-step like this actually got me wanting to try it today.

[Arek]

Awesome! Go for it - glad it got you inspired ;] Let me know how it goes!