진행률 링
CSSPaint


72%
35%
체크 표시 그리기와 같은 점선 기법을 원에 적용했습니다. 반지름을 15.9155로 두면 원 둘레가 정확히 100이 됩니다. 그래서 72%를 채우려면 점선을 100 - 72 = 28만큼만 밀어 두면 되므로, 계산이 간단해집니다. 비율은 --value로 넣습니다.
값 조정
바꾼 값은 아래 코드에 바로 반영됩니다.
- 애니메이션 속성
- stroke-dashoffset
- 렌더링 비용
- Paint
demo-로 시작하는 클래스는 미리보기 모양을 위한 것이라 복사할 코드의 CSS에는 넣지 않았습니다.