Wie erstelle ich einen CSS-Fortschrittskreis mit benutzerdefinierten Prozentstopps?

So erstellen Sie einen CSS-Fortschrittskreis mit benutzerdefinierten Prozentstopps

Es kann vorkommen, dass kreisförmige Fortschrittsbalken erforderlich sind, die standardmäßigen animierten Kreise jedoch zu 100 % gefüllt werden. nicht Ihren Spezifikationen entsprechen. In diesem Artikel zeigen wir, wie man einen CSS-Fortschrittskreis erstellt, der bei bestimmten Prozentpunkten gestoppt werden kann.

CSS-Implementierung

Unser Ziel ist es, CSS zu verwenden, um diesen Fortschrittskreis mit bestimmten Prozentpunkten zu erreichen Prozentsatz stoppt. So geht's:

.wrapper {
  width: 100px;
  height: 100px;
  position: absolute;
  clip: 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);
}

div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function:linear;
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s;
  -webkit-animation-delay: 3s;
  -webkit-animation-name: close-wrapper;
}

.circle[data-anim~=left] {
  -webkit-animation-duration: 6s;
  -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: right-spin;
}

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

HTML-Struktur

Sobald Sie das CSS eingerichtet haben, können Sie den Fortschrittskreis mit der folgenden HTML-Struktur erstellen:

<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>

Dieser Code erstellt einen Fortschrittskreis, der mit einem Halbkreis (50 %) beginnt und dann die linke Seite auf 360 Grad und die rechte Seite auf 180 dreht Grad.

Fazit

Mit dieser CSS-Technik können Sie jetzt kreisförmige Fortschrittsbalken mit benutzerdefinierten Prozentstopps erstellen, ohne dass JavaScript erforderlich ist. Dies eröffnet verschiedene Möglichkeiten, individuelle Fortschrittsindikatoren zu entwerfen, die Ihren spezifischen Anforderungen entsprechen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen CSS-Fortschrittskreis mit benutzerdefinierten Prozentstopps?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!