How to make splash screen with progress tracking in Angular?

Arek — Sun, 08 Jun 2025 20:18:18 +0000

📝 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.

DEV Community: Arek

How to make splash screen with progress tracking in Angular?

📝 Preface

🧪 Demo Project

Should the Splash Screen Be a Component?

🎨 Where Should Splash Screen Styles and Scripts Go?

🔄 Can I Update the Splash Screen Dynamically?

📌 Bottom line

🕒 What's Next (Advanced Topics)