请实现一个网站加载进度条

"```markdown 实现网站加载进度条的方法有多种，下面介绍一种基于CSS和JavaScript的简单实现方法。

首先，我们需要在HTML中添加一个用于显示进度的元素，比如一个带有特定ID的div：

<div id=\"progress\"></div>

然后，在CSS中定义进度条的样式，例如设置宽度、高度、背景色等：

#progress {
  width: 0%;
  height: 4px;
  background-color: #007bff; /* 进度条颜色 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: width 0.3s ease; /* 进度条动画效果 */
}

接下来，我们使用JavaScript来监测页面加载情况，并更新进度条的宽度。可以通过监听window对象的load和DOMContentLoaded事件来实现：

window.addEventListener('load', function() {
  document.getElementById('progress').style.width = '100%';
  setTimeout(function() {
    document.getElementById('progress').style.display = 'none'; // 加载完成后隐藏进度条
  }, 300);
});

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('progress').style.width = '70%'; // DOM加载完成后，进度条宽度为70%
});

以上是一个简单的网站加载进度条的实现方法，通过CSS和JavaScript配合，我们可以在页面加载过程中展示一个美观的进度条，提升用户体验。