Insert markup in Progress bar

Asked

Viewed 179 times

2

I couldn’t find a way to insert a mark in the bar, I’m trying to show a mean.

How is it:

How I’d like to show the average:

Does anyone know how I can do it with bootstrap?

twitter-bootstrap

1 answer

3


A suggested implementation with "Stacked", example:

Demo: Jsfiddle

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 50%">
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 5%">
  </div>
  <div class="progress-bar progress-bar-success" style="width: 45%">
  </div>
</div>

Upshot:
Progress bar

Another way would be to create a class and position on the progress-bar, example:

Demo: Jsfiddle

HTML 

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 50%">
  </div>
  <span class="marcador"></span>
</div>

CSS 

.marcador{
    display:inline-block;
    position:relative;
    top:0;
    left:10%;
    width:5px; 
    height:80px; 
    background-color:red;
}

Upshot:
progress span

  • Man, the fuck is that in this example you gave I lose my prime bag marking? But this suggestion helped me to think of a new possibility, I will try and anything I send the result. Anyway worth!

  • @Alessandrogomes, I understand, plus you can also use a class as a marker, positioning on the Progress, see on this link http://jsfiddle.net/vmFzL/2/, if you edit edit my answer by adding the solution, more sincerely, I suggest using the first option and readjust your marking

  • Caraaa this second solution is better for the application I need here! if you want to edit the answer, send it. Thanks

  • @Alessandrogomes edited the answer with the alternative method

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.