网页加载时页面显示进度条加载完成之后显示网页内容

要实现网页加载时显示进度条，并在加载完成后显示网页内容，你可以使用HTML、CSS和JavaScript来构建这个功能。以下是一个简单的示例实现：

### HTML


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="progress-container">
    <div id="progress-bar" style="width: 0%;"></div>
</div>
<div id="content" style="display: none;">
    <!-- 这里放置你的网页内容 -->
    <h1>欢迎来到我的网页</h1>
    <p>这是一个加载完成后显示的示例内容。</p>
</div>

<script src="script.js"></script>
</body>
</html>

### CSS (`style.css`)


#progress-container {
    width: 100%;
    background-color: #ddd;
}

#progress-bar {
    height: 20px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 20px;
    color: white;
    width: 0%;
    transition: width 0.4s ease-in-out;
}

### JavaScript (`script.js`)


// 假设这是模拟的加载过程
function simulateLoading() {
    let progress = 0;
    const progressBar = document.getElementById('progress-bar');
    const interval = setInterval(function() {
        progress += 10; // 每次增加10%的进度
        progressBar.style.width = progress + '%';
        if (progress >= 100) {
            clearInterval(interval);
            document.getElementById('content').style.display = 'block'; // 显示内容
        }
    }, 1000); // 每秒更新一次进度
}

// 页面加载完成后开始模拟加载
window.onload = function() {
    simulateLoading();
};

在这个示例中，我们创建了一个带有进度条的HTML页面，并在JavaScript中模拟了一个加载过程。当进度条达到100%时，它会自动隐藏进度条并显示网页内容。你可以根据实际需求调整模拟加载的过程和进度更新的逻辑。