How to Create a CSS Progress Circle with Custom Percentage Stops?-CSS Tutorial-php.cn

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

Barbara Streisand

Release： 2024-12-10 02:35:13

Original

911 people have browsed it

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);
  }
}

Copy after login

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>

Copy after login

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!