Add percent to progress bar on click

Question

I have my progress bar i use on my forms. I wan't to add the percent without decimal. When the bar is 33.33% above the bar should there be a "33%".

When i search around i can only find percent for animated loading bars and not on click.

Here's my progress bar 2 examples.

(function($){
    // First bar
    $('.nav.one .next').click(function(){
        // Animate progressbar
        $(".progressbar.one").animate({
            width: "+=33.33%"
        },"slow"); 
    });
    $('.nav.one .prev').click(function(){
        // Animate progressbar
        $(".progressbar.one").animate({
            width: "-=33.33%"
        },"slow"); 
    });
    
    // Second bar
  $('.nav.two .next').click(function(){
        // Animate progressbar
        $(".progressbar.two").animate({
            width: "+=25%"
        },"slow"); 
    });
    $('.nav.two .prev').click(function(){
        // Animate progressbar
        $(".progressbar.two").animate({
            width: "-=25%"
        },"slow"); 
    });
})(jQuery);

.progressbar {
  height: 20px;
  background: lightblue;
  display: inline-block;
}
.progressbar.one {
  width: 33.33%;
}
.progressbar.two {
  width: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I wan't to show progress bar percent here</p>
<div class="progressbar one"></div>
<div class="nav one"><button class="prev">Prev</button> | <button class="next">Next</button></div>
<hr />
<p>I wan't to show progress bar percent here</p>
<div class="progressbar two"></div>
<div class="nav two"><button class="prev">Prev</button> | <button class="next">Next</button></div>

Answer 1

You could .ceil() or .floor() the decimal number.

var width = $(".progress").width().floor();

This would give you "33" instead of "33.33"

to animate the number going up you can use and modify this code

$({ countNum: $(wNumber).text()}).animate({
    countNum: countTo
    },{
    duration: $scope.duration,
    easing:'swing',
    step: function() {
          $(wNumber).text(Math.floor(this.countNum));
    },
    complete: function() {
        $(wNumber).text(this.countNum);
    }

});

where wNumber probably is the jquery link to the number you want to animate

Answer 2

Here I initialize the width var at 33.33 at beginning, when I click on next I increment 33.33 to the variable, when I click on prev I decrease 33.33 to the variable and I show it with html JQuery function.

Here you go !

EDIT : You can use ceil function to make it equal to 33% instead of 33.33% I added code to disable prev button when width is equal to 0%

(function($){
// Initialize width and default width
var width = 33.33;
$('#percent').html('33.33 %');
$('.next').click(function(){
        // Increment width by 33.33% and show it
				width += 33.33;
        $('#percent').html(width + ' %');
        // Animate progressbar
        $(".progressbar").animate({
            width: "+=33.33%"
        },"slow"); 
        // Disable prev button if width is equal to 0
        if(width == 0){
          $('.prev').attr('disabled','disabled');
        }
        else {
          $('.prev').removeAttr('disabled');
        }
    });
    $('.prev').click(function(){
        // Decrease width by 33.33% and show it
    		width -= 33.33;
        $('#percent').html(width + ' %');
        // Animate progressbar
        $(".progressbar").animate({
            width: "-=33.33%"
        },"slow"); 
        // Disable prev button if width is equal to 0
        if(width == 0){
          $(this).attr('disabled','disabled');
        }
        else {
          $(this).removeAttr('disabled');
        }
    });

})(jQuery);

.progressbar {
  width: 33.33%;
  height: 20px;
  background: lightblue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I wan't to show progress bar percent here : <span id="percent"></span></p>
<div class="progressbar"></div>
<div class="nav"><button class="prev">Prev</button> | <button class="next">Next</button></div>