@keyframes progressSpinnerRotate { 100% { transform: rotate(360deg); } } @keyframes progressSpinnerDash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } .progressSpinnerSvg { animation: progressSpinnerRotate 2s linear infinite; height: 100%; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .progressSpinnerCircle { stroke-dasharray: 89, 200; stroke-dashoffset: 0; stroke: #ffd800; animation: progressSpinnerDash 1.5s ease-in-out infinite; stroke-linecap: round; }