>source

Angular를 사용하여 부드럽고 깔끔한 로딩 페이지를 가질 수 있는지 알고 싶었습니다.

예를 들어 콘솔 firebase의 로딩 페이지는 다음과 같습니다.

Firebase 로고

나는 상식이 내부에 코드를 가지고 있다는 것을 알고 있습니다.

<app-root></app-root>

하지만이 작업을 수행 할 때로드 애니메이션 내부에 시간이 있습니다. <app-root> 그리고 페이지의 렌더링. 그리고이 시간은 느린 네트워크에서는 중요하지 않습니다.

누군가가 그런 일을했거나 그것을 달성하는 방법에 대한 아이디어가 있다면, 나는 제안을 할 것입니다.


  • 답변 # 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>
    
    

    필요한 모든 모듈과 구성 요소가로드되지 않을 때까지 애니메이션이 적용됩니다.

  • 이전 flutter - 이 축소 막대를 내 Google지도에 표시하려면 어떻게해야합니까?
  • 다음 Flutter Flexible Text가 열에 넘칩니다