CSS 전환 카운터?

Question

페이지에 진행률 표시 줄이 있습니다. 현재 나는 바가 transition에 의해 영향을 받기 때문에 진행이 바뀌면 부드럽게 새로운 값으로 이동합니다.

막대에도 진행률이 백분율로 표시됩니다.

내가 직면 한 "문제"는 바 너비가 전환되는 동안 표시된 숫자가 값에서 값으로 점차 이동하므로 CSS에서 숫자를 "전환"할 수있는 방법이 있는지 궁금합니다. 내가 생각할 수있는

유일한 해결책은 물론

counter-reset: tmpcounter 50; 
content: counter(tmpcounter); 
transition: counter-reset 0.5s ease; 

는,이 작동하지 않습니다 사용하는 것입니다. 비록 그것이했다면, 그것은 단지 psuedo-element를 위해서만 작동 할 것이므로 값이 바뀔 때 자바 스크립트로 수정할 방법이 없을 것입니다.

나는 무엇이 없습니까? 아니면 이것에 대해 걱정할 필요가 없습니까?

Answer 1

점핑 숫자와 관련된 문제를 잘 모르겠습니다. 그러나 Thermometer-like progress bar의 예가 도움이 될까요?