5_Adding Splash Screen - mukeshrathore/base-project GitHub Wiki

Until the application fully load or bootstraps and renders on browser, we need to show some screen to denote that background process is in progress. To cater that feature we are adding splash screen.

Please add below code in index.html
<body class="mat-typography"> <app-root>
// Below code is acting like splash/Loading Screen
// Declaring the styles below is more appropriate since it gets completely discarded once angular has finished bootstrapping the root component
<style> body { background-color: #f2f2f2; }

  app-root {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #696b6e;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 2.5em;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  }
</style>
Application Loading...

</app-root></body>

⚠️ **GitHub.com Fallback** ⚠️