Displaying a meager 0.5% on the BootStrap progress indicator

Question

Displaying a meager 0.5% on the BootStrap progress indicator

Utilizing the bootstrap progress bar to display the percentage of a person's miles covered out of a total of 23,872 miles.

Take user A as an example, they have covered only 5 miles:

5/23872 = 0.00020945 * 100 = 0.02094504 miles.

Currently, anything below 1% does not appear on the progress bar.

Is there a way to display the percentage of miles below 1% on the progress bar similar to the 28% shown in the image above but with a different color for example green?

Code for Conversion:

// Calculating Percentages for each region
var ukPercent = $scope.ukTotal / 23872;
var apacPercent = $scope.apacTotal / 23872;
var naPercent = $scope.naTotal / 23872;

$scope.ukPercentage = ukPercent * 100;
$scope.naPercentage = naPercent * 100;
$scope.apacPercentage = apacPercent * 100;

javascript angularjs twitter-bootstrap progress-bar

Answer 1

Answer №1

If you're not concerned with it being slightly less than 1%, why not start at 1% and then make progress from there using Math.max().

Check out the Demo in Stack Snippets

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

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

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

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

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

}).keyup();

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<div class="form-group">
  <label for="traveledMiles">Traveled Miles</label>
  <input type="text" class="form-control" id="traveledMiles"
         placeholder="Enter Traveled Miles" value="5">
</div>
<div class="form-group">
  <label for="totalMiles">Total Miles</label>
  <input type="text" class="form-control" id="totalMiles" 
         placeholder="Enter Total Miles" value="23872">
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="width: 60%;"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">60%</span>
  </div>
</div>

If you're using a label, you may want to consider following Bootstrap's recommendation:

To ensure that the text remains readable even at lower percentages, consider adding a minimum width to the progress bar.

For example:

<div class="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;

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

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

}).keyup();

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<div class="form-group">
  <label for="traveledMiles">Traveled Miles</label>
  <input type="text" class="form-control" id="traveledMiles"
         placeholder="Enter Traveled Miles" value="5">
</div>
<div class="form-group">
  <label for="totalMiles">Total Miles</label>
  <input type="text" class="form-control" id="totalMiles" 
         placeholder="Enter Total Miles" value="23872">
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="min-width: 2em;width: 60%;"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    60%
  </div>
</div>

Answer 2

If you're not concerned with it being slightly less than 1%, why not start at 1% and then make progress from there using Math.max().

Check out the Demo in Stack Snippets

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

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

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

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

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

}).keyup();

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<div class="form-group">
  <label for="traveledMiles">Traveled Miles</label>
  <input type="text" class="form-control" id="traveledMiles"
         placeholder="Enter Traveled Miles" value="5">
</div>
<div class="form-group">
  <label for="totalMiles">Total Miles</label>
  <input type="text" class="form-control" id="totalMiles" 
         placeholder="Enter Total Miles" value="23872">
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="width: 60%;"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">60%</span>
  </div>
</div>

If you're using a label, you may want to consider following Bootstrap's recommendation:

To ensure that the text remains readable even at lower percentages, consider adding a minimum width to the progress bar.

For example:

<div class="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;

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

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

}).keyup();

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<div class="form-group">
  <label for="traveledMiles">Traveled Miles</label>
  <input type="text" class="form-control" id="traveledMiles"
         placeholder="Enter Traveled Miles" value="5">
</div>
<div class="form-group">
  <label for="totalMiles">Total Miles</label>
  <input type="text" class="form-control" id="totalMiles" 
         placeholder="Enter Total Miles" value="23872">
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="min-width: 2em;width: 60%;"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    60%
  </div>
</div>

Answer 3

Answer №2

To enhance user experience with the progress bar, I recommend using a variable named "actualProgress" to monitor the decimal progress value. Since bootstrap progress bars function with integers, you can update its value as follows (using JavaScript):

actualProgress = 0.0; actualProgress += a certain percentage of progress achieved;

$("#my-progress-bar").css("width", Math.floor(actualProgress) + "%");

By implementing this method, the progress bar will show a more accurate representation of the progress made for the user.

Answer 4

To enhance user experience with the progress bar, I recommend using a variable named "actualProgress" to monitor the decimal progress value. Since bootstrap progress bars function with integers, you can update its value as follows (using JavaScript):

actualProgress = 0.0; actualProgress += a certain percentage of progress achieved;

$("#my-progress-bar").css("width", Math.floor(actualProgress) + "%");

By implementing this method, the progress bar will show a more accurate representation of the progress made for the user.

Displaying a meager 0.5% on the BootStrap progress indicator

Answer №1

Check out the Demo in Stack Snippets

Answer №2

Similar questions

A dynamic JQuery carousel displaying a variety of albums

An unforeseen issue arose while trying to update the data in a Chart.js chart within a Vue application

Elevate your frontend development game with the powerful combination of Vue js 3

Angular JS modal displaying CKEditor is not functioning properly

Tips for transferring the data from one yform value to another field

Angular 2 module transpilation services

AngularJS postback method fails to trigger

Move to Fieldset Upon Link Click

How can you disable an 'option' HTML5 element using the AngularJS methodology?

The imported JS file shows a warning that the variable 'myProperty' is defined but not utilized anywhere

Having trouble with Angular 2 and localhost/null error while attempting to make an http.get request?

What is the most effective way to display multiple variables simultaneously in Mongoose/Node.js?

JavaScript Age confirmation Overlay

The overlappingmarkerspidifier is throwing an error because it is unable to access the property '__e3_' of an undefined variable

Discover the positions of the y-axis tick marks with d3.js

Does an href and click events both happen simultaneously?

You can only use the angularjs http function once

Whenever my NodeJs encounters an unhandledPromise, it throws an error

Is there a way to utilize two onChange functions within one component?

Retrieving Data with AJAX: Submitting Data and Retrieving Response