How to ease out a loading screen in Angular?

Question

I created a loading screen in index.html in Angular like:

<app-root>
    <div class="app-loading">
      <svg class="logo" viewBox="0 0 100 100" >

      </svg>
    </div>
</app-root>

and applied some style. But after the page loads, the svg just disappears suddenly.

<style type="text/css">
body, html {
  height: 100%;
}
.app-loading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.app-loading .logo {
  height: 100px;
  width: 100px;
  transform-origin: center center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>

How could I make and ease-out transition when it disappears?

Answer 1

The SVG disappears because the HTML defined within app-root in your index.html is replaced with the rendered app-root component after application bootstrap.

To transition this, you can move .app-loading outside of app-root and transition it out over your bootstrapped application how you wish. In the demo below, it's just absolutely positioned fullscreen.

You can wait for the platformBrowserDynamic().bootstrapModule(...) promise to complete to trigger the transition.

index.html

<div class="app-loading">
    ...
</div>

<app-root></app-root>

main.ts (or where your app is bootstrapped)

// loading element container to transition
const loadingElement = document.querySelector(".app-loading");

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  // trigger the transition
  .then(() => loadingElement.classList.add("loaded"))
  // remove the loading element after the transition is complete to prevent swallowed clicks
  .then(() => setTimeout(() => loadingElement.remove(), 1000));