预引导加载屏幕

我正在寻找一个预引导加载屏幕，类似于这个例子但对于 Angular 2 来说。

我可以建议一种简单的 CSS 方法。

首先添加.loadingdiv 到主 HTML 页面中，它应该遵循主应用程序组件元素。例如：

<my-app></my-app>

<div class="loading">
    <h1>Loading...</h1>
</div>

现在您可以使用以下命令定位启动屏幕并设置其样式my-app:empty + .loadingCSS 选择器，并使其在应用程序启动后立即消失。例子：

/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.loading {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

如果您将所有繁重的脚本放在关闭正文标记之前，并在头部仅保留加载屏幕所需的最少样式，则这种方法效果会更好，以便它尽快显示，然后开始加载脚本。

这是一个简单的演示：

Demo: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview