默认情况下，角度应用程序显示一个小的未设置样式的加载...在第一次加载和引导主应用程序组件时，位于浏览器的左上角。我们可以很容易地将默认加载指示器更改为几乎任何我们想要的。

<$>[注意]以下方法适用于任何角度2+应用程序。<$>

以下是我们的加载屏幕的外观：

这个例子有点夸张，背景是鲑鱼色的，但它是一个很好的例子，说明了什么是可以轻松完成的。

根组件标签中的内容

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

 1[label index.html]
 2<!doctype html>
 3<html>
 4<head>
 5  <meta charset="utf-8">
 6  <title>Fancy Loading Screen</title>
 7  <base href="/">
 8  <meta name="viewport" content="width=device-width, initial-scale=1">
 9  <link rel="icon" type="image/x-icon" href="favicon.ico">
10</head>
11<body>
12
13  <app-root>Loading...</app-root>
14
15</body>
16</html>

如果你检查你的应用程序后，它完全加载，加载.文本无处可寻，因为它被根组件模板的内容完全替换。

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

1<app-root>
2  <style>
3    app-root {
4      color: purple;
5    }
6  </style>
7  I'm a purple loading message!
8</app-root>

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

现在你可以在那里疯狂，做任何事情。一个想法是包含某种类型的css或svg微调器。

在我们的示例中，我们为页面提供了粉色背景，使用Flexbox将加载消息居中，为其提供了更漂亮的系统字体，我们甚至在省略号中添加了别致的动画：

 1<app-root>
 2  <style>
 3  app-root {
 4    display: flex;
 5    justify-content: center;
 6    align-items: center;
 7    height: 100vh;
 8
 9    color: pink;
10    text-transform: uppercase;
11    font-family: -apple-system,
12        BlinkMacSystemFont,
13        "Segoe UI",
14        Roboto,
15        Oxygen-Sans,
16        Ubuntu,
17        Cantarell,
18        Helvetica,
19        sans-serif;
20    font-size: 2.5em;
21    text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
22  }
23  body {
24    background: salmon;
25    margin: 0;
26    padding: 0;
27  }
28
29  @keyframes dots {
30    50% {
31      transform: translateY(-.4rem);
32    }
33    100% {
34      transform: translateY(0);
35    }
36  }
37
38  .d {
39    animation: dots 1.5s ease-out infinite;
40  }
41  .d-2 {
42    animation-delay: .5s;
43  }
44  .d-3 {
45    animation-delay: 1s;
46  }
47  </style>
48
49  Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
50</app-root>

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

根组件标签中的内容