Percent of a bootstrap progress bar

Question

I have a sales goal i want to hit every quarter, say 100.

My progress bar is supposed to show what my pace is with sales so far in the qtr.

if im behind pace

Over pace

Heres the kicker, i cant think of a way to show the red mark as an accurate percentage of the green bar because its a percent of a percent. Bootstrap seems to only let me stack progress bars but i just want to show a percent of that progress bar as red or blue.

Answer 1

You can use a box-shadow:inset to create an inner border on the right side - inside the progress bar (you can use js to determine the colour and size required) without changing the overall outer dimension of the bar. I used a progress bar of 35% width and a box shadow of -13px and colour red. These can be calculated relative to your sales figures and amended accordingly.

Note for the sake of this - I used inline styling for the css rule - I would normally pull that out and have it in the external CSS, but I did it this way for this example.

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%; box-shadow:inset -13px 0px 0px red;"> <span class="sr-only">35% Complete (success)</span> </div> </div>

Answer 2

Bootstrap Stacked progress bar 可能会拯救你，检查： Stacked progress bar