css 진도 표시줄의 텍스트는 진도에 따라 점차적으로 변합니다

요구 사항
1. 진도표 안의 문자는 진도의 길이에 따라 달라진다.
의 원리
똑같은 div 두 개를 겹쳐서.
효과
글꼴이 파란색으로 시작하여 진행률 표시줄을 따라 흰색으로 바뀝니다.
온라인 미리 보기:
https://jsfiddle.net/lmxdawn/...
코드

    
    
    !function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);
    
    

    
        function process() {
            var t = 1;
            var max = 320;
            var progress = document.getElementById("process");
            var process_texts = document.getElementsByClassName("process-text");
            var interval = setInterval(function () {
                if (t == max) {
                    clearInterval(interval);
                    for (var i in process_texts){
                        process_texts[i].innerHTML = '  '
                    }
                } else {
                    progress.style.width = t + "px";
                    for (var i in process_texts){
                        process_texts[i].innerHTML = '  ' + (t / max * 100).toFixed(2) + "%"
                    }
                    t++;
                }
            }, 10)
        }