<svg class="circle-spinner" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke="#3498db" stroke-width="8" stroke-linecap="round" />
  </svg>
<h3>Circular spinner</h3>

body {
  display: flex;
  background: #e7e7e7;
  justify-content: center;
  align-items:center;
  min-height: 100vh;
}

svg {
  width: 100px;
  height: 100px;
}

@keyframes circleRotate {
  0% {
    stroke-dashoffset: 251;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.circle-spinner circle {
  stroke-dasharray: 250;
  transform-origin: center;
  animation: circleRotate 2s linear infinite;
}

h3 {
  padding: 30px;
}