进度条（CSS）

效果（实际有动态效果）

html

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

css

.progress-bar{
  width: 100%;
  height: 30px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 24px;
  background-color: rgba(180, 160, 120, .2);
  position: relative;
}
.progress-bg{
  width: 10%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background-image: linear-gradient(135deg, #00BFFF 25%,#FA8072 0,#FA8072 50%,#00BFFF 0,#00BFFF 75%, #FA8072 0);
  border-radius: 24px;
  animation: panoramic 20s linear infinite;
  background-size: 32px 100%;
}
@keyframes panoramic{
  to {
    background-position: 200% 0;
  }
}