CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Daniel
Daniel

Reputation: 1466

How to animate Twitter Bootstrap Progress bar with jQuery

I was trying to animate with jQuery. But when I scroll back and forth, it keeps animating, and I want the width to be width: 50% but it keeps incrementing the width.

JS Fiddle : http://jsfiddle.net/pPf7N/310/

var target = $('.target').offset().top + 1;

$(document).scroll(function(){
  if($(this).scrollTop() > target ){
    $('.progress-bar').animate({
      'width': '50%'
    });
  }
});
.progress {
  margin-top: 600px;
}
.target {
  height: 1000px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

<div class="target">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1622

Answers (3)

ryeballar
ryeballar

Reputation: 30088

Bootstrap3 progress bar component already comes with animation. You can simply change animate() to css() when changing the width.

$('.progress-bar').css({
  'width': '50%'
});


var target = $('.target').offset().top + 1;

$(document).scroll(function(){
  if($(this).scrollTop() > target){
    $('.progress-bar').css({
      'width': '50%'
    });
  }
});
.progress {
  margin-top: 600px;
}
.target {
  height: 1000px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

<div class="target">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
</div>

If you want to have more control in the animation with jQuery's animate() then one option is to simply add an indicator that you've finished animating the element.

var target = $('.target').offset().top + 1;
var hasScrolled = false; // this is the indicator

$(document).scroll(function(){
  // also check if progress bar has been scrolled
  if($(this).scrollTop() > target && !hasScrolled){
    hasScrolled = true; // set indicator to true to avoid re-animating again
    $('.progress-bar').animate(
      {'width': '50%' },
      {
        duration: 400,
        easing: 'easeInOutQuint' // This easing function is from jquery-ui
      }
    );
  }
});


var target = $('.target').offset().top + 1;
var hasScrolled = false; // this is the indicator

$(document).scroll(function(){
  // also check if progress bar has been scrolled
  if($(this).scrollTop() > target && !hasScrolled){
    hasScrolled = true; // set indicator to true to avoid re-animating again
    $('.progress-bar').animate(
      {'width': '50%' },
      {
        duration: 400,
        easing: 'easeInOutQuint' // This easing function is from jquery-ui
      }
    );
  }
});
.progress {
  margin-top: 600px;
}
.target {
  height: 1000px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

<div class="target">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
</div>

Upvotes: 1

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

Please try this:

var target = $('.target').offset().top + 1;

var animateProgressBar = (function() {
    var animated = false;
    return function () {
        if (!animated) {
            animated = true;
           $('.progress-bar').animate({
             'width':'50%'
           });
        }
    };
})();

$(document).scroll(function(){
    if( $(this).scrollTop() > target ){
        animateProgressBar();
    }
});

Demo: http://jsfiddle.net/s7egm818/

Upvotes: 1

frnt
frnt

Reputation: 8795

Why you want that to be greater than target offsetTop value, when you set that it start your animation when you scroll back from bottom to top.

progress{
   margin-top:200px;
}

$(document).scroll(function(){
    if( $(this).scrollTop() > 0 ){
    $('.progress-bar').css({
        width:'50%'
    });
  }
  else{
    $('.progress-bar').css({
        width:'0%'
    });
  }
});

Upvotes: 0

Related Questions