Wie stoppt man einen CSS-Fortschrittskreis bei einem bestimmten Prozentsatz?

CSS-Fortschrittskreis: Kontrolle des prozentualen Stillstands

Mit CSS können Sie Fortschrittskreise erstellen, die den Fortschrittsstand visuell anzeigen. Typischerweise füllen Fortschrittsbalken den gesamten Kreis aus, wenn der Abschluss zu 100 % erreicht ist. Es kann jedoch vorkommen, dass Sie den Fortschrittskreis bei bestimmten Prozentsätzen stoppen müssen.

Um dies zu erreichen, können wir CSS-Clipping und -Animationen nutzen. Lassen Sie uns den in der Geige bereitgestellten Code aufschlüsseln:

.wrapper {
  width: 100px;
  height: 100px;
  position: absolute;
  clip: rect(0px, 100px, 100px, 50px);
}

Die .wrapper-Klasse definiert den äußeren Container, der den Fortschrittskreis enthält. Wir setzen die Breite und Höhe auf 100 Pixel und positionieren es absolut. Entscheidend ist, dass wir eine Clip-Eigenschaft anwenden, um die Hälfte des Fortschrittsbalkens auszublenden (rect(0px, 100px, 100px, 50px)).

.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}

Im .wrapper erstellen wir den eigentlichen Fortschrittskreis mithilfe der . Kreisklasse. Wir geben ihm die gewünschte Größe und den gewünschten Stil mit einem grünen Rand und abgerundeten Ecken. Eine weitere wichtige Clip-Eigenschaft wird angewendet, um den Kreis nur in der rechten Hälfte des Containers sichtbar zu machen.

Der verbleibende Code verwendet CSS-Animationen und Datenattribute, um das Verhalten des Fortschrittskreises zu steuern. Durch Anpassen der Clip-Eigenschaften in den Keyframes können wir die Bewegung des Kreises auf einen bestimmten Prozentsatz beschränken. Bei der Geige beispielsweise vollzieht der Kreis eine halbe Umdrehung, um bei 50 % anzuhalten.

Durch die Kombination dieser Techniken können Sie CSS-Fortschrittskreise erstellen, die dynamisch Fertigstellungsprozentsätze ohne animierte Schleifen anzeigen.

Das obige ist der detaillierte Inhalt vonWie stoppt man einen CSS-Fortschrittskreis bei einem bestimmten Prozentsatz?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!