Question

我对正常加载消息不满意。所以，我正在为Angular2使用自定义加载屏幕。加载屏幕样式位于index.html中。它完美地工作，直到导入的css文件在index.html中。当我将导入的css文件移动到styles.css时。自定义加载屏幕无法正常工作。首先，自定义加载屏幕中的错误样式。几秒钟后，应用正确的样式。

我不确定问题是什么，可能会应用不同的样式或在一段时间后应用正确的样式。

的index.html

<body>  
  <app-root>
  <style>
    #pre-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #EEEEEE;
    text-transform: uppercase;
    font-family: -apple-system,
        sans-serif;
    font-size: 2.5em;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    background: white;
    margin: 0;
    padding: 0;
  }

  @keyframes dots {
    50% {
      transform: translateY(-.4rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  #pre-loader .d {
    animation: dots 1.5s ease-out infinite;
  }
  #pre-loader .d-2 {
    animation-delay: .5s;
  }
  #pre-loader .d-3 {
    animation-delay: 1s;
  }
  </style>
    <div id="pre-loader">Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
    </div>
  </app-root>
</body>

PL。帮我解决

我的实际屏幕是

但我有一个错误的屏幕

Angular2自定义加载屏幕

0 个答案: