在每一个元素中填充分接进度条。

Question

如何在每个元素中按百分比填写进度条。1步= 1%。示例，并附加一个css cod示例。我想我需要正确的方法来填充每个元素，我有想法在里面添加很多元素，但这是愚蠢的方法。

​

.progress-bar {
    margin-right: 2px;
    border-radius: 5px;
}

.progress{
    display: flex;
    justify-content: space-between;
    width: 474px;
}

.progress-bar-success{
    background-color: #0099FF;
}

.progress-bar-danger{
    background-color: white;
    opacity: 80%;
    border: 1px solid #b3b3b3;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<div class="container">
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-success" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
  </div>
</div>

​

​

​

Answer 1

您可以使用linear-gradient()

​

.progress-bar {
    margin-right: 2px;
    border-radius: 5px;
}

.progress{
    display: flex;
    justify-content: space-between;
    width: 474px;
}

.progress-bar-success{
    background-color: #0099FF;
}

.progress-bar-danger{
    background-color: white;
    opacity: 80%;
    border: 1px solid #b3b3b3;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<div class="container">
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar" role="progressbar" style="width: 12.5%; background: linear-gradient(to right ,#5cb85c , #5cb85c 30%, transparent 30%);">
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 12.5%"></div>
  </div>
</div>

​