Spinner SVG with animation styles moved inside

Stolen spinner from codepen

by AntowaKartowa

HTML

<div class="container">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    fill="none"
    preserveAspectRatio="xMinYMin meet"
    viewBox="0 0 50 50"
    class="spinner"
  >
    <style>
      #spinner {
      	animation: rotate 2s linear infinite;
      	transform-origin: center;
      }

      #circle {
      	animation: dash-step 1.5s ease-in-out infinite;
      	stroke: currentColor;
      }

			@keyframes rotate {
				to { transform: rotate(360deg); }
			}

			@keyframes dash-step {
				0% {
					stroke-dasharray: 1, 150;
					stroke-dashoffset: 0;
				}
				50% {
					stroke-dasharray: 90, 150;
					stroke-dashoffset: -35;
				}
				100% {
					stroke-dasharray: 90, 150;
					stroke-dashoffset: -124;
				}
			}
    </style>
    <g id="spinner">
      <circle
        id="circle"
        cx="25"
        cy="25"
        r="20"
        stroke-width="5"
        stroke-linecap="round"
      />
    </g>
  </svg>
</div>

CSS

html, body {
  height: 100%;
  background-image: linear-gradient(-105deg, #009acc, #363795);
}

.container {
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
  height: 150px;
}

.spinner {
  width: 100%;
  height: 100%;
  color: yellow;
}