Angular загрузка страницы - PullRequest
Новая
       11

Angular загрузка страницы

1 голос
/ 17 апреля 2020

Я хотел знать, возможно ли иметь гладкую и чистую страницу загрузки с Angular.

Например, страница загрузки консоли firebase:

Firebase Lo go

Я знаю, что здравый смысл состоит в том, чтобы иметь код внутри: 

<app-root></app-root>

Но когда я делаю это, между загрузкой анимации есть время внутри <app-root> и визуализация страницы. И это время не является незначительным в медленной сети.

Если кто-то сделал что-то подобное или есть идеи, как это сделать, я приму любые предложения.

1 Ответ

0 голосов
/ 20 апреля 2020

Вы можете создать свой собственный дизайн

попробуйте добавить код ниже в индекс. 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>

Он будет анимирован до тех пор, пока все необходимые модули и компоненты не будут загружены.

...