CSS loader/Progress spinner Material angular 2+

Question

I'm trying to imitate the loader/Progress spinner from angular material. So far I made the following component. But I don't know why the length of the dash isn't changing.

 body { background-color: white; } // demo-specific .showbox { position: absolute; } // end demo-specific .loader { position: relative; margin: 0 auto; width: 100px; &:before { content: ''; display: block; padding-top: 100%; } } .circular { animation: rotate 2s linear infinite; height: 100%; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 2s ease-in-out infinite; stroke-linecap: round; stroke: #0057e7; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 20, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 200, 200; stroke-dashoffset: -125px; } } 

  <div class="showbox"> <div class="loader"> <svg class="circular" viewBox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/> </svg> </div> </div> 

Answer 1

对我来说，问题似乎是从0％直接变为50％，在这些示例中，它们是从0％过渡到10％等，等等。仅包括0至50％之间的更多步骤。