Reines HTML+CSS, um einen Element-Ladeeffekt zu erzielen

<svg viewBox="25 25 50 50" Klasse="Box">
    <Kreis cx="50" cy="50" r="20" Füllung="keine" Klasse="Kreis"></Kreis>
</svg>

.Kasten {
    Höhe: 200px;
    Breite: 200px;
    Hintergrund: Weizen;
}
.Box .Kreis {
    Strichbreite: 2;
    Schlaganfall: #409eff;
    Strichlinienende: rund;
}

/* Rotationsanimation */
@keyframes drehen {
    Zu {
        transformieren: drehen (1 Drehung)
    }
}
/* Bogenanimation */
/* 125 ist der Umfang des Kreises */
@keyframes Kreis {
    0% {
 /* Status 1: Punkt */
        Strich-Dasharray: 1 125;
        Strich-Dashoffset: 0;
    }
    50 % {
 /* Zustand 2: Kreis */
        Strich-Dasharray: 120, 125;
        Strich-Dashoffset: 0;
    }
    Zu {
 /* Zustand 3: Punkt (Schrumpfung in Drehrichtung) */
        Strich-Dasharray: 120 125;
        Strich-Schema-Höhepunkt: -125px;
    }
}
.Kasten {
  /* ...dasselbe wie oben*/
  Animation: 2 s rotieren, linear, unendlich;
}
.Kreis {
  /* ...dasselbe wie oben*/
  Animation: Kreis 2s unendlich;
}