css实现百分比动态进度

CSS实现百分比动态进度是一种非常常用的效果，可以用来展示网站的加载进度、下载进度等。下面我们来介绍一下如何使用CSS实现百分比动态进度。

 /*CSS代码*/
.progress{
  width: 200px;
  height: 10px;
  background-color: #EEE;
  border-radius: 5px;
  position:relative;
}
.progress .bar{
  width: 0%;
  height: 100%;
  background-color: #666;
  border-radius: 5px;
  position:absolute;
  top:0;
  left:0;
  transition: width 0.5s ease-in-out;
}

首先，我们需要创建一个用于展示进度的元素，例如div，并添加一个样式类progress。我们设置其宽度和高度，以及背景颜色和圆角。而.progress .bar元素是进度条填充的部分，我们利用绝对定位将其覆盖在progress容器上，并设置其初始宽度为0%

接下来就是通过JS动态获取数据并更新进度条了。比如在下载时，我们可以监听XMLHttpRequest的progress事件，并获取到已下载的数据量和总数据量，然后计算出已完成的百分比，将其赋值给.progress .bar元素的width属性即可：

//JS代码
const xhr = new XMLHttpRequest();
xhr.open('GET','example.com/load/data');
xhr.onprogress = (event)=>{
  const progress = event.loaded / event.total;//计算已完成的百分比
  document.querySelector('.progress .bar').style.width = `${progress*100}%`;//更新进度条
}
xhr.send();

以上就是使用CSS实现百分比动态进度的详细步骤，希望能对大家有所帮助。