使用纯CSS实现网页动态加载条效果

在网页中实现动态加载条效果可以仅使用CSS完成，无需JavaScript。以下是几种常见的实现方法：

方法一：使用CSS动画和伪元素

.loader {
  width: 100%;
  height: 4px;
  background-color: #f3f3f3;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}

.loader::before {
  content: "";
  display: block;
  width: 30%;
  height: 100%;
  background-color: #3498db;
  animation: loading 2s ease-in-out infinite;
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(300%);
  }
  100% {
    transform: translateX(300%);
  }
}

方法二：使用线性渐变和动画

.loader {
  width: 100%;
  height: 4px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: linear-gradient(to right, #3498db, #3498db) no-repeat;
  background-size: 0% 100%;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
    background-size: 0% 100%;
  }
  50% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 0% 100%;
  }
}

方法三：进度条从0到100%加载效果

.loader {
  width: 100%;
  height: 4px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #f3f3f3;
}

.loader::after {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  background-color: #3498db;
  animation: fullLoading 3s ease-out forwards;
}

@keyframes fullLoading {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

使用方法

将上述CSS代码添加到你的样式表中，然后在HTML中添加一个div元素：

<div class="loader"></div>

自定义选项

你可以通过修改以下属性来自定义加载条： - 修改height值调整加载条高度 - 修改background-color或background值改变颜色 - 调整animation的持续时间（如2s改为1s） - 使用animation-timing-function改变动画速度曲线

注意事项

1. 这些效果会在页面加载时自动开始动画
2. 如果需要根据实际加载进度控制，仍需使用JavaScript
3. 固定定位(position: fixed)确保加载条始终可见

以上方法都使用了纯CSS3动画特性，兼容现代浏览器。如需支持旧版浏览器，可能需要添加相应的浏览器前缀。