自定义进度条引导。填充点

Question

我已经设计了一个带有引导的进度条，但是我不能自定义进度条。

代码

<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="60" aria-valuemax="60" style="width:60%">
        60%
    </div>
</div>
</div>

如何自定义Bootstrap中的进度条，如下图所示

​

​

Answer 1

您可以使用图标并将其放置在进度栏上。

​

.fa-circle{
  position:relative;
  right:50px;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
<div class="progress">
<span><i class="fa fa-circle"></i></span>
                  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30"
                  aria-valuemin="60" aria-valuemax="60" style="width:60%">
                    60% 
                  </div>
                </div>
                </div>

​