custom progress bar bootsrap. fill with point

Question

I have designed a progressbar with Bootstrap, but I cannot customize the progress bar.

the code

<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>

How to customize the progress bar in Bootstrap with point like this picture

score 2 · Answer 1 · answered Mar 15 '17 at 09:14

You can use icons and position them on the progress bar wherever you want.

.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>

custom progress bar bootsrap. fill with point

1 Answers1