1
<svg class="circular" viewbox="25 25 50 50">
2
  <circle class="path" cx="50" cy="50" r="20" fill="none" />
3
</svg>

1
.circular {
2
  width: 100px;
3
  height: 100px;
4
  animation: rotate 2s linear infinite;
5
}
6
.path {
7
  stroke-dasharray: 1, 200;
8
  stroke-dashoffset: 0;
9
  stroke: #000;
10
  animation: dash 1.5s ease-in-out infinite;
20 collapsed lines
11
}
12
@keyframes rotate {
13
  100% {
14
    transform: rotate(360deg);
15
  }
16
}
17
@keyframes dash {
18
  0% {
19
    stroke-dasharray: 1, 200;
20
    stroke-dashoffset: 0;
21
  }
22
  50% {
23
    stroke-dasharray: 89, 200;
24
    stroke-dashoffset: -[-35px];
25
  }
26
  100% {
27
    stroke-dasharray: 89, 200;
28
    stroke-dashoffset: -[-124px];
29
  }
30
}