[分享]css原始进度条怎么用

CSS原始进度条即是通过CSS样式表来自定义进度条的样式，使用原始进度条能够简单又迅速地为网站增加一个视觉效果。 / HTML结构 / / CSS样式 / .progress { backgro...

CSS原始进度条即是通过CSS样式表来自定义进度条的样式，使用原始进度条能够简单又迅速地为网站增加一个视觉效果。

 /* HTML结构 */
  <div class="progress">
    <div class="progress-bar"></div>
  </div>

  /* CSS样式 */
  .progress {
    background-color: #f2f2f2;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
  }

  .progress-bar {
    background-color: #4CAF50;
    height: 100%;
    width: 0%;
    transition: width 1s ease-in-out;
  } 

通过上面的代码，我们使用了一个div元素来作为进度条的容器，并且给进度条的背景设置了一个灰色。在进度条的内部，我们设置了一个div元素，这个元素的背景是绿色的，宽度初始值为0，通过CSS中的transition属性使其变化的速度变慢并且更为流畅。

接下来，在JavaScript中我们需要改变这个进度条的width值，例如我们想要让这个进度条的宽度增加到50%：

 const progressBar = document.querySelector('.progress-bar');
  progressBar.style.width = '50%'; 

通过上面这段代码，我们可以让进度条的宽度从0%变化到50%，这里我们使用了querySelector来获取这个元素。同样，我们也可以在CSS样式表中添加其他的样式来完善进度条的效果。

需要注意的是，CSS原始进度条只适用于在页面加载数据时的加载效果，而且不支持在IE9及以下的浏览器上显示。