특정 백분율에서 멈추는 CSS 전용 진행 표시기를 어떻게 만들 수 있습니까?

CSS만 사용하여 특정 백분율에서 멈추는 진행률 표시기

이 웹사이트에서 진행률 표시줄을 검색했지만 전체 100%로 표시되는 애니메이션 원을 모두 찾았습니다. 하지만 아래 스크린샷에 표시된 것과 같이 특정 비율에서 멈추는 진행률 표시줄을 만드는 데 관심이 있습니다.

CSS만 사용하여 이 효과를 얻으려면 클리핑과 애니메이션 기술을 조합하여 활용할 수 있습니다. . 예를 들어 다음 바이올린을 고려해보세요.

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

이 바이올린에서는 클리핑, 원형 요소 및 애니메이션의 조합을 사용하여 원하는 효과를 생성합니다. 클립 속성을 사용하여 진행률 표시줄의 절반을 숨긴 다음 원형 요소의 다양한 부분의 회전에 애니메이션을 적용하면 특정 비율에서 중지되는 진행률 표시줄이 구현됩니다.

위 내용은 특정 백분율에서 멈추는 CSS 전용 진행 표시기를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!