진행률 링

CSSPaint
전체 목록
72%
35%
마우스를 올리면 재생

체크 표시 그리기와 같은 점선 기법을 원에 적용했습니다. 반지름을 15.9155로 두면 원 둘레가 정확히 100이 됩니다. 그래서 72%를 채우려면 점선을 100 - 72 = 28만큼만 밀어 두면 되므로, 계산이 간단해집니다. 비율은 --value로 넣습니다.

값 조정

바꾼 값은 아래 코드에 바로 반영됩니다.

애니메이션 속성
stroke-dashoffset
렌더링 비용
Paint