Angular 加载页面

Question

我想知道是否可以使用 Angular.

来获得流畅干净的加载页面

例如控制台firebase的加载页面：

Firebase Logo

我知道这样做的常识是里面有代码:

<app-root></app-root>

但是当我这样做时，<app-root> 中的加载动画和页面呈现之间有时间。而这个时间在慢速网络上并不是微不足道的。

如果有人做过类似的事情或有任何想法如何完成它，我会采纳任何建议。

Answer 1

您可以创建自己的设计

尝试在 index.html

中添加以下代码

<body>
  <app-root></app-root>

  <style>
    @-webkit-keyframes spin {
      0% {
        transform: rotate(0)
      }

      100% {
        transform: rotate(360deg)
      }
    }

    @-moz-keyframes spin {
      0% {
        -moz-transform: rotate(0)
      }

      100% {
        -moz-transform: rotate(360deg)
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0)
      }

      100% {
        transform: rotate(360deg)
      }
    }

    .spinner {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1003;
      background: #000000;
      overflow: hidden
    }

    .spinner div:first-child {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      box-shadow: 0 3px 3px 0 rgba(255, 56, 106, 1);
      transform: translate3d(0, 0, 0);
      animation: spin 2s linear infinite
    }

    .spinner div:first-child:after,
    .spinner div:first-child:before {
      content: '';
      position: absolute;
      border-radius: 50%
    }

    .spinner div:first-child:before {
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      box-shadow: 0 3px 3px 0 rgb(255, 228, 32);
      -webkit-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite
    }

    .spinner div:first-child:after {
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      box-shadow: 0 3px 3px 0 rgba(61, 175, 255, 1);
      animation: spin 1.5s linear infinite
    }
  </style>
  <div id="nb-global-spinner" class="spinner">
    <div class="blob blob-0"></div>
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="blob blob-3"></div>
    <div class="blob blob-4"></div>
    <div class="blob blob-5"></div>
  </div>
</body>

它将动画化，直到所有必需的模块和组件都未加载。

Angular 加载页面

Angular loading page

ionic-framework

angular

ionic4