Vue implementiert einen dynamischen kreisförmigen prozentualen Fortschrittsbalken

Als ich kürzlich ein kleines Programm entwickelte, musste ich einen kreisförmigen prozentualen Fortschrittsbalken implementieren, der dem folgenden Entwurfsdiagramm ähnelt:

Als Neuling hatte ich das Gefühl, dass die Implementierung schwierig sein würde, also ging ich zu Baidu, um zu sehen, wie andere es gemacht haben, aber ich fand keine zufriedenstellende Lösung. Entweder war es eine statische Implementierung oder es waren viele DOM- Operationen erforderlich. Es ist besser, direkte DOM- Operationen in Miniprogrammen zu vermeiden.

Das Folgende ist eine dynamische Implementierung, die ich in Form einer Vue-Komponente erstellt habe. Hier ist zunächst das Effektdiagramm:

Wirkung

Implementierungsschritte

Kreisdiagramm zeichnen

.Kuchen {
  Anzeige: Inline-Block;
  Position: relativ;
  Breite: 150px;
  Höhe: 150px;
  Rand oben: 40px;
  Randradius: 50 %;
  Hintergrund: #ccc;
  Hintergrundbild: linearer Farbverlauf (nach rechts, transparent 50 %, #4479FD 0);
  Farbe: transparent;
  Textausrichtung: zentriert;
}

Proportionseffekt erzielen

Dies wird durch das Hinzufügen von Okklusion und Bewegung von Pseudoelementen erreicht. Der Code lautet wie folgt:

.pie::vor {
  Inhalt: '';
  Position: absolut;
  oben: 0; links: 50 %;
  Breite: 50 %; Höhe: 100 %;
  Randradius: 0 100 % 100 % 0 / 50 %;
  Hintergrundfarbe: erben;
  Transform-Origin: links;
  Animation: Drehung 5 s linear unendlich, Hintergrund 10 s Schritt-Ende unendlich;
}
@keyframes drehen {
  zu { transformieren: drehen(.5turn); }
}
@keyframes bg {
  50 % { Hintergrund: #4479FD; }
} 

Verwenden der CSS-Eigenschaft „Animation Delay“

Ändern Sie die Animationszeit oben auf 50 bzw. 100, so dass Sie die entsprechenden Verzögerungssekunden direkt in der Animationsverzögerung übergeben können. Beispielsweise werden -60 s bei 60 % angezeigt.

Animations-Wiedergabestatus: angehalten;
Animationsverzögerung: -60s;

Erreichen einer Torusform

Fügen Sie ein positioniertes Div direkt im Div hinzu

<div Klasse="Kuchen">
  <div Klasse="Kuchen-Innenteil">
  {{num}} %
  </div>
</div>

Fügen Sie eine Animation mit konstanter Geschwindigkeit hinzu

startAnimate (Schritt, Grenze, Geschwindigkeit) {
  setzeTimeout(() => {
  // Num ist ein Prozentsatz, wenn (this.num < Limit) {
      this.num += Schritt
      this.startAnimate(Schritt, Grenze, Geschwindigkeit)
    } anders {
      diese.Nummer = Grenze
    }
  }, Geschwindigkeit)
}

Binden Sie berechnete Eigenschaften an die Animationsverzögerung

Konvertieren Sie die Zahl in Echtzeit in die entsprechenden Verzögerungssekunden

berechnet: {
    Verzögerung () {
      gibt `-${this.num}s` zurück
    }
}

Zusammenfassen

Bisher wurde ein dynamischer, kreisförmiger prozentualer Fortschrittsbalken grundsätzlich realisiert, aber er ist noch nicht perfekt. Wenn Sie Kommentare oder Fragen haben, können Sie diese gerne stellen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.