线性进度条页面加载css

在Web应用程序中，页面加载速度是一个重要的方面。为了向用户提供更好的用户体验，可以添加一个进度条来指示页面加载的进度。线性进度条是其中之一。这篇文章将介绍如何在页面加载时添加一个线性进度条。

HTML结构

首先，在HTML中添加一个div元素和一个内部元素以容纳进度条：

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

CSS样式

然后，在CSS中添加样式以渲染进度条，并使用JavaScript动态更新进度条的宽度。

.progress {
  position: relative;
  height: 4px;
  background-color: #f0f0f0;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background-color: #00bfff;
  transition: width 0.3s ease-in-out;
}

这里，我们定义了一个高度为4px的进度条。.progress类设置了进度条的基本样式，.progress-bar类设置了进度条的颜色和大小，并使用CSS过渡效果来使宽度更自然地更新。

JavaScript代码

最后，我们需要使用JavaScript代码来获取页面加载的进度，并更新进度条的宽度。

var progressBar = document.querySelector('.progress-bar');

window.addEventListener('load', function() {
  progressBar.style.width = '100%';
});

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  var percent = (scrollTop / (scrollHeight - clientHeight)) * 100;

  progressBar.style.width = percent + '%';
});

这里，我们使用window.load事件来检测页面是否加载完全，并将进度条的宽度设置为100％。然后，我们使用window.scroll事件来监测页面滚动，计算当前页面滚动的百分比，然后通过设置进度条的宽度来更新进度条。

至此，我们已经完成了一个简单的线性进度条页面加载，它将展示页面加载的进度。