title: How to ease out a loading screen in Angular?
body: <p>I created a loading screen in index.html in Angular like:</p>
  
  <pre><code>&lt;app-root&gt;
      &lt;div class="app-loading"&gt;
        &lt;svg class="logo" viewBox="0 0 100 100" &gt;
  
        &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/app-root&gt;
  </code></pre>
  
  <p>and applied some style. But after the page loads, the svg just disappears suddenly.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  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;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>How could I make and ease-out transition when it disappears?</p>