预引导加载屏幕 [英] Pre-bootstrap loading screen

问题描述

我正在按照此示例，但适用于Angular 2.

I'm looking for a pre-bootstrap loading screen along the lines of this example but for Angular 2.

推荐答案

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

I can suggest a simple CSS approach.

首先将.loading div添加到HTML主页面中，它应位于主应用程序组件元素之后.例如:

First of all add .loading div into main HTML page, it should follow main app component element. For example:

<my-app></my-app>

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

现在，您可以使用my-app:empty + .loading CSS选择器来定位初始屏幕并设置其样式，并在应用程序启动后立即消失.示例:

Now you can target and style splash screen with my-app:empty + .loading CSS selector, and make it disappear as soon as the app gets bootstraped. Example:

/* 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;
}

如果在关闭body标签之前放置所有沉重的脚本，并在头部的加载屏幕中保留必要的最小样式，则这种方法会更好，这样它会尽快出现，然后开始加载脚本.

This approach works better if you put all heavy scripts before closing body tag and leave just minimal styles necessary to the loading screen in the head so it shows up as soon as possible and then scripts start to load.

这是一个简单的演示:

演示: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1 ?p =预览

这篇关于预引导加载屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！