How to Create a CSS Progress Circle with Custom Percentage Stops?

How to Create a CSS Progress Circle with Custom Percentage Stops

You may encounter scenarios where circular progress bars are needed, but the default animated circles that fill to 100% don't meet your specifications. In this article, we will demonstrate how to create a CSS progress circle that can be stopped at specific percentage points.

CSS Implementation

Our goal is to use CSS to achieve this progress circle with specific percentage stops. Here's how to do it:

.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 Structure

Once you have the CSS in place, you can create the progress circle using the following HTML structure:

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

This code will create a progress circle that starts with a half-circle (50%) and then rotates the left side to 360 degrees and the right side to 180 degrees.

Conclusion

Using this CSS technique, you can now create circular progress bars with custom percentage stops without the need for JavaScript. This opens up various possibilities for designing custom progress indicators to meet your specific requirements.

The above is the detailed content of How to Create a CSS Progress Circle with Custom Percentage Stops?. For more information, please follow other related articles on the PHP Chinese website!