Angular 6 - 应用启动前的 svg 加载微调器

Question

我想在 Angular 应用程序启动之前放置加载微调器。加载微调器本身可以完美运行，但如果我将它放在 index.html 中，它就会停止移动。看起来 svg 属性不受支持或未正确加载。 CSS 样式是通过使用 head 部分中的样式元素加载的。

    html,body {
    height: 100%;
    background: #6d5bf5;
    }
    .panel {
      height: 100%;
      width: 100%;
      background: #6d5bf5;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .spinner-svg {
      flex: 1;
      width: 4em;
      height: 4em;
      fill: #ffffff;
    }

<div class="panel">
      <svg class="spinner-svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
        <g transform="rotate(-90 43 -17)">
          <circle cx="0" cy="0" r="8">
            <animateTransform id="b" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="0;a.end" />
          </circle>
        </g>
        <g transform="rotate(-30 124.962 -145.406)">
          <circle cx="0" cy="0" r="8">
            <animateTransform id="c" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="b.end" />
          </circle>
        </g>
        <g transform="rotate(30 -98.962 205.406)">
          <circle cx="0" cy="0" r="8">
            <animateTransform id="d" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="c.end" />
          </circle>
        </g>
        <g transform="rotate(90 -17 77)">
          <circle cx="0" cy="0" r="8">
            <animateTransform id="e" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="d.end-0.02s"
            />
          </circle>
        </g>
        <g transform="rotate(150 4.962 42.594)">
          <circle cx="0" cy="0" r="8">
            <animateTransform id="f" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="e.end" />
          </circle>
        </g>
        <g transform="rotate(-150 21.038 17.406)">
          <circle cx="0" cy="0" r="8">
            <animateTransform id="a" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="f.end" />
          </circle>
        </g>
      </svg>
    </div>

Answer 1

在这种情况下尝试使用基于 CSS 的动画，并通过样式标签使用 CSS：

  <ion-app>
      <div class="lds-ripple">
        <div></div>
        <div></div>
      </div>
      <style type="text/css">
        .lds-ripple {
            position: absolute;
            position: absolute;
            top: 50%;
            margin-top: -100px;
            left: 50%;
            margin-left:-100px;
        }
        @keyframes lds-ripple {
          0% {
            top: 96px;
            left: 96px;
            width: 0;
            height: 0;
            opacity: 1;
          }
          100% {
            top: 18px;
            left: 18px;
            width: 156px;
            height: 156px;
            opacity: 0;
          }
        }
        @-webkit-keyframes lds-ripple {
          0% {
            top: 96px;
            left: 96px;
            width: 0;
            height: 0;
            opacity: 1;
          }
          100% {
            top: 18px;
            left: 18px;
            width: 156px;
            height: 156px;
            opacity: 0;
          }
        }
        .lds-ripple div {
          box-sizing: content-box;
          position: absolute;
          border-width: 4px;
          border-style: solid;
          opacity: 1;
          border-radius: 50%;
          -webkit-animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
          animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        }
        .lds-ripple div:nth-child(1) {
          border-color: #488aff;
        }
        .lds-ripple div:nth-child(2) {
          border-color: #32db64;
          -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
        }
      </style>
  </ion-app>