Question

我想知道Angular是否有可能提供一个平滑整洁的加载页面。

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

我知道这样做的常识是在其中包含代码：

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

它将进行动画处理，直到未加载所有必需的模块和组件。

角度加载页面

1 个答案: