在Angular中创建自定义加载屏幕

默认情况下，Angular 应用程序在首次加载和引导主应用程序组件时在浏览器的左上角显示一个小的无样式 Loading...。我们可以轻松地将默认加载指示器更改为几乎任何我们想要的。

以下适用于任何 Angular 2+ 应用程序。

这是我们的加载屏幕的样子：

这个例子有点过头了，背景是鲑鱼色等等，但它是一个很好的例子，说明什么很容易做到。

根组件标签中的内容

请注意，在您的应用程序的主 index.html 文件中，默认的 Loading... 只是插入到应用程序的根组件标签之间：

索引.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Fancy Loading Screen</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

  <app-root>Loading...</app-root>

</body>
</html>

如果您在完全加载后检查您的应用程序，则找不到 Loading... 文本，因为它已完全替换为根组件模板的内容。

这意味着我们可以在这些标签之间放置任何东西，包括样式定义，一旦 Angular 完成加载和引导根组件，它就会被完全清除：

<app-root>
  <style>
    app-root {
      color: purple;
    }
  </style>
  I'm a purple loading message!
</app-root>

我们不必担心这些样式在加载后会影响我们的应用程序，因为所有内容都会被完全丢弃。

现在你可以在那里发疯，做任何事情。一个想法是包含某种 CSS 或 SVG 微调器。

在我们的例子中，我们给页面一个粉红色的背景，我们用 Flexbox 将加载消息居中，给它一个更漂亮的系统字体，我们甚至给省略号添加一个漂亮的动画：

<app-root>
  <style>
  app-root {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    color: pink;
    text-transform: uppercase;
    font-family: -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen-Sans,
        Ubuntu,
        Cantarell,
        Helvetica,
        sans-serif;
    font-size: 2.5em;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  }
  body {
    background: salmon;
    margin: 0;
    padding: 0;
  }

  @keyframes dots {
    50% {
      transform: translateY(-.4rem);
    }
    100% {
      transform: translateY(0);
    }
  }

  .d {
    animation: dots 1.5s ease-out infinite;
  }
  .d-2 {
    animation-delay: .5s;
  }
  .d-3 {
    animation-delay: 1s;
  }
  </style>

  Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</app-root>