css原始进度条

CSS原始进度条是一种简单的进度条样式，它直接使用CSS的属性和值对页面元素进行样式处理，不需要使用JavaScript等其他脚本语言，也不需要引入其他插件或库。

progress {
  background-color: #e5e5e5;
  border-radius: 10px;
  height: 15px;
  position: relative;
  overflow: hidden;
}
progress::-webkit-progress-value {
  background-color: #0080ff;
  border-radius: 10px;
  height: 100%;
  position: relative;
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}
progress::-moz-progress-bar {
  background-color: #0080ff;
  border-radius: 10px;
  height: 100%;
  position: relative;
  -moz-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

上面的代码中，我们定义了一个<progress>元素作为进度条的容器，并对其设置了background-color、border-radius、height、position和overflow等样式属性，使其能够呈现出我们想要的进度条样式。

接着，在<progress>元素的子元素::-webkit-progress-value和::-moz-progress-bar中，我们对进度条的进度部分进行了样式定义，如background-color、border-radius、height、position和-webkit-animation等属性，其中-webkit-animation和animation是对动画的设置，让进度条在加载时具有条纹动画效果。

最后，我们还定义了两个@keyframes规则，用于控制条纹动画的播放效果。

使用CSS原始进度条，能够快速地为页面添加一个简单的进度条，不需要额外的JavaScript代码，更加轻便简洁。