Angular 6 - svg loading spinner before app startup

Question

I wanted to put loading spinner before Angular application startup. Loading spinner itself works perfectly, but if I put it inside index.html it stops moving. It looks like svg attributes are not supported or not loaded properly. CSS style is loaded by using a style element in the head section.

  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

Try using CSS based animation in this case and use CSS via style tag:

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