ピュアhtml+cssでの要素読み込み効果

<svg viewBox="25 25 50 50" class="box">
    <circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
</svg>

.box {
    height: 200px;
    width: 200px;
    background: wheat;
}
.box .circle {
    stroke-width: 2;
    stroke: #409eff;
    stroke-linecap: round;
}

/* Rotate animation */
@keyframes rotate {
    to {
        transform: rotate(1turn)
    }
}
/* Arc animation */
/* 125 is the circumference of the circle */
@keyframes circle {
    0% {
 /* state1: point */
        stroke-dasharray: 1 125;
        stroke-dashoffset: 0;
    }
    50% {
 /* State 2: circle */
        stroke-dasharray: 120, 125;
        stroke-dashoffset: 0;
    }
    to {
 /* State 3: Point (contracted in the direction of rotation) */
        stroke-dasharray: 120 125;
        stroke-dashoffset: -125px;
    }
}
.box {
  /* ... same as above */
  animation: rotate 2s linear infinite;
}
.circle {
  /* ... same as above */
  animation: circle 2s infinite;
}