Angular2的Pre-Bootstrap加载屏幕

Question

我正在寻找一个沿着这个例子的行的预启动加载屏幕,但是对于Angular2.

Answer 1

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

首先将.loadingdiv 添加到主HTML页面,它应该遵循主app组件元素.例如:

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

如果你在关闭body标签之前放置所有重的脚本并且只为头部的加载屏幕留下必要的最小样式,这种方法会更好,所以它会尽快显示,然后脚本开始加载.

这是一个简单的演示:

演示: http ://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1？p = preview

Answer 2

我使用FontAwesome微调器采用了一种简单的方法(我也喜欢其他答案):

<app-root>
    <div class="text-center">
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <div>Something witty for your userbase</div>
    </div>
</app-root>

Answer 3

为什么不尝试这种方法:

<app-root>
    <style type="text/css">
        #pre-bootstrap {
            background-color: #262626;
            bottom: 0px;
            left: 0px;
            position: fixed;
            right: 0px;
            top: 0px;
            z-index: 999999;
        }

        #pre-bootstrap div.messaging {
            color: #FFFFFF;
            font-family: monospace;
            left: 0px;
            margin-top: -37px;
            position: absolute;
            right: 0px;
            text-align: center;
            top: 50%;
        }

        #pre-bootstrap h1 {
            font-size: 26px;
            line-height: 35px;
            margin: 0px 0px 20px 0px;
        }

        #pre-bootstrap p {
            font-size: 18px;
            line-height: 14px;
            margin: 0px 0px 0px 0px;
        }
  </style>

  <div id="pre-bootstrap">
    <div class="messaging">
        <h1>
            App is Loading
        </h1>

        <p>
            Please stand by for your ticket to awesome-town!
        </p>

      </div>
   </div>
</app-root>