CODEWITHSUNDEEP
javascripttwitter-bootstrapprogress-bar
johnnE
johnnE

Reputation: 169

Percent of a bootstrap progress bar

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.

enter image description here

if im behind pace

enter image description here

Over pace

enter image description here

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.

Upvotes: 1

Views: 1328

Answers (2)

gavgrif
gavgrif

Reputation: 15499

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.

progress bard

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

Upvotes: 1

Ron
Ron

Reputation: 6735

Bootstrap Stacked progress bar may save you, check: Stacked progress bar

Upvotes: 0

Related Questions