HTML 簡易 自動前進 進度條

按下按鈕時按鈕禁用，進度條開始每10毫秒前進1，到達100時停止，按鈕啟用

執行畫面：

程式碼：

<label>wait:</label>

<progress id="progress" max="100" value="0"></progress>

<button id="button" onclick="loadProgress()">Load</button>

<script type="text/javascript">
    function loadProgress() {
        const progress = document.getElementById('progress');
        const button = document.getElementById('button');
        progress.value = 0;
        const interval = setInterval(() => {
            progress.value += 1;
            button.disabled = true;
            if (progress.value >= 100) {
                clearInterval(interval);
                button.disabled = false;
            }
        }, 10);//單位: 毫秒
    }
</script>
<!--Ruyut-->

Github Gist:

參考資料：

MDN Web Docs