一段简单的网页顶部加载进度条css 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';
    
    // 快速增加到60%
    loadProgress = 60;
    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);