需要

1.進捗バーの文字は進捗の長さに応じて変化する

げんり

そっくりの2つのスタイルの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)
        }