Showing Less Then 1% On The Bootstrap Progress Bar

I am using the bootstrap progress bar to show the percentage of miles covered by someone from a total of 23,872 miles. For example if user A covered only 5 miles which means: 5/238

Solution 1:

If you don't care if how much less than 1% it is, how about using Math.max() to just start at one percent and then start making meaningful progress after that.

Demo in Stack Snippets

var $traveled = $("#traveledMiles"),
    $total = $("#totalMiles"),
    $progressBar = $('.progress-bar');

$($traveled).add($total).keyup(function(){

  var percent = $traveled.val() / $total.val() * 100;

  // at least 1%
  percent = Math.max(percent,1);

  $progressBar
    .css('width', percent+'%')
    .attr('aria-valuenow', percent)
    .children(".sr-only").html(percent+'%'); 

}).keyup();

<linkhref="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" /><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script><divclass="form-group"><labelfor="traveledMiles">Traveled Miles</label><inputtype="text"class="form-control"id="traveledMiles"placeholder="Enter Traveled Miles"value="5"></div><divclass="form-group"><labelfor="totalMiles">Total Miles</label><inputtype="text"class="form-control"id="totalMiles"placeholder="Enter Total Miles"value="23872"></div><divclass="progress"><divclass="progress-bar"role="progressbar"style="width: 60%;"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"><spanclass="sr-only">60%</span></div></div>

Since you have a label, you could even follow Bootstrap's suggestion:

To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

Like this:

<divclass="progress-bar"style="min-width: 2em;">

var $traveled = $("#traveledMiles"),
    $total = $("#totalMiles"),
    $progressBar = $('.progress-bar');

$($traveled).add($total).keyup(function(){

  var percent = $traveled.val() / $total.val() * 100;

  // at least 1%
  percent = Math.max(percent,1);
  
  // round off decimals
  percent = Math.round(percent);
  
  // max of 100%
  percent = Math.min(percent,100);

  $progressBar
    .css('width', percent+'%')
    .attr('aria-valuenow', percent)
    .html(percent+'%'); 

}).keyup();

<linkhref="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" /><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script><divclass="form-group"><labelfor="traveledMiles">Traveled Miles</label><inputtype="text"class="form-control"id="traveledMiles"placeholder="Enter Traveled Miles"value="5"></div><divclass="form-group"><labelfor="totalMiles">Total Miles</label><inputtype="text"class="form-control"id="totalMiles"placeholder="Enter Total Miles"value="23872"></div><divclass="progress"><divclass="progress-bar"role="progressbar"style="min-width: 2em;width: 60%;"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100">
    60%
  </div></div>

Solution 2:

I think the best approach would be to use a variable called something like "realProgress" to keep track of the decimal value of your progress bar. Since a bootstrap progress bar only works with integers you can update it's value like so (in Javascript):

realProgress = 0.0; realProgress += some percentage of progress made;

$("#my-progress-bar").css("width", math.Floor(realProgress) + "%");

This way, the progress bar's value still get updated in a way that is meaningful to the user.