Wie kann ich einen reinen CSS-Fortschrittsindikator erstellen, der bei einem bestimmten Prozentsatz stoppt?

Fortschrittsindikatoren, die nur mit CSS bei bestimmten Prozentsätzen stoppen

Sie haben auf dieser Website nach Fortschrittsbalken gesucht, aber die, die Sie Ich habe alle animierten Kreise gefunden, die zu 100 % angezeigt werden. Sie möchten jedoch einen Fortschrittsbalken erstellen, der bei bestimmten Prozentsätzen anhält, wie im folgenden Screenshot dargestellt.

Um diesen Effekt nur mit CSS zu erzielen, können Sie eine Kombination aus Beschneidungs- und Animationstechniken verwenden . Betrachten Sie die folgende Geige als Beispiel:

.wrapper {
  width: 100px; /* Set the size of the progress bar */
  height: 100px;
  position: absolute; /* Enable clipping */
  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;  /* Only run once */
  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
  -webkit-animation-timing-function:linear; /* Linear animation */
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
  -webkit-animation-delay: 3s; /* Wait half of the animation */
  -webkit-animation-name: close-wrapper; /* Keyframes name */
}

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

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s; /* Half animation time */
  -webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

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

In dieser Geige wird eine Kombination aus Ausschnitt, kreisförmigen Elementen und Animation verwendet, um den gewünschten Effekt zu erzielen. Durch Ausblenden der Hälfte des Fortschrittsbalkens mithilfe der Clip-Eigenschaft und anschließendes Animieren der Drehung verschiedener Teile der kreisförmigen Elemente wird ein Fortschrittsbalken erreicht, der bei bestimmten Prozentsätzen stoppt.

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