How to Stop a CSS Progress Circle at a Specific Percentage?

CSS Progress Circle: Controlling Percentage Stoppage

Using CSS, you can create progress circles that visually indicate progress levels. Typically, progress bars fill the entire circle upon reaching 100% completion. However, you may encounter situations where you need to stop the progress circle at specific percentages.

To achieve this, we can leverage CSS clipping and animation. Let's break down the code provided in the fiddle:

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

The .wrapper class defines the outer container that will hold the progress circle. We set the width and height to 100px and position it absolutely. Crucially, we apply a clip property to hide half of the progress bar (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);
}

Within the .wrapper, we create the actual progress circle using the .circle class. We give it the desired size and style with a green border and rounded corners. Another important clip property is applied to make the circle visible only within the right half of the container.

The remaining code uses CSS animations and data attributes to control the behavior of the progress circle. By adjusting the clip properties in the keyframes, we can restrict the circle's movement to a specific percentage. For example, in the fiddle, the circle completes half a rotation to stop at 50%.

By combining these techniques, you can create CSS progress circles that dynamically indicate completion percentages without animated loops.

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