一段简单的网页顶部加载进度条JS代码简洁实现

通过CSS 和 JS 实现，打开网页加载的过程中，进度条跟随网页的加载速度而载入，直到网页加载完毕后隐藏；

HTML代码

<div id="progress-bar"></div>

CSS代码

#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0; 
    height: 5px;
    background-color: #4caf50;
    transition: width 0.3s linear; 
    z-index: 9999;
}

JS代码

// 创建一个变量来追踪加载进度
let loadProgress = 0;
let progressBar;
 
// 当DOM加载开始时初始化进度条
document.addEventListener('DOMContentLoaded', function() {
    progressBar = document.getElementById('progress-bar');
    progressBar.style.width = '0%';
    progressBar.style.display = 'block';
    
    // 快速增加到10%
    loadProgress = 10;
    progressBar.style.width = loadProgress + '%';
});
 
// 页面完全加载时完成进度条
window.addEventListener('load', function() {
    // 从当前进度平滑过渡到100%
    let interval = setInterval(function() {
        if (loadProgress >= 100) {
            clearInterval(interval);
            // 完成后延迟隐藏进度条
            setTimeout(function() {
                progressBar.style.display = 'none';
            }, 500);
            return;
        }
        loadProgress += 2;
        progressBar.style.width = loadProgress + '%';
    }, 20);
});
 
// 如果加载时间过长，缓慢增加进度
let slowProgress = setInterval(function() {
    if (loadProgress >= 90) {
        clearInterval(slowProgress);
        return;
    }
    if (loadProgress < 90) {
        loadProgress += 0.5;
        if (progressBar) {
            progressBar.style.width = loadProgress + '%';
        }
    }
}, 100);

打开您的网络浏览器中的文件，您将看到的内容：绿色进度栏将出现在页面顶部，它将迅速跳至10％的DOM时，当DOM准备就绪时，然后在页面上很长时间就可以平稳地增加了一定的时间。即使您滚动，栏也可以固定在页面顶部。