Bootstrap进度条技巧

Question

如何在bootstrap中创建进度条，如下图所示

progress bar

Answer 1

我相信这就是你要做的事情：

https://codepen.io/laurenglegg/pen/ayEpVe

<div class="labels">
  <span>HTML5</span>
  <span>95%</span>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
  </div>
</div>

body {
  padding: 50px;
}
.labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.labels span {
  color: #666;
}
.progress {
  height: 5px;
}
.progress-bar {
  background: -webkit-linear-gradient(left, #33156d 0%, #f282bc 100%);
  /* Chrome10-25,Safari5.1-6 */
}