How Can I Create a CSS-Only Progress Indicator That Stops at a Specific Percentage?-CSS Tutorial-php.cn

How Can I Create a CSS-Only Progress Indicator That Stops at a Specific Percentage?

Susan Sarandon

Release： 2024-12-14 03:14:14

Original

544 people have browsed it

How Can I Create a CSS-Only Progress Indicator That Stops at a Specific Percentage?

Progress Indicators That Stop at Specific Percentages Using CSS Only

You've searched for progress bars on this website, but the ones you've found all show animated circles that go to the full 100%. However, you're interested in creating a progress bar that stops at certain percentages, like the one displayed in the screenshot below.

To achieve this effect using only CSS, you can utilize a combination of clipping and animation techniques. Consider the following fiddle as an example:

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

Copy after login

<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

In this fiddle, a combination of clipping, circular elements, and animation is employed to create the desired effect. By hiding half of the progress bar using the clip property, and then animating the rotation of different portions of the circular elements, a progress bar that stops at specific percentages is achieved.

The above is the detailed content of How Can I Create a CSS-Only Progress Indicator That Stops at a Specific Percentage?. For more information, please follow other related articles on the PHP Chinese website!