CODEWITHSUNDEEP
jquerycss
Jitender
Jitender

Reputation: 7971

progress bar in css not smooth

I am making a timer with a progress bar. It working but it's not smooth as it should be. it begins nice but gradually become slow.

https://jsfiddle.net/vtpe83os/

const defaultTiming = 12;
const added = $(window).width() / defaultTiming; 
 let timer = 1;
 let timerInterval = setInterval(function(){
 if(timer  === defaultTiming) {
    timer = 0;
    $("#animate").width(0);
  $("#animate").animate({width: '100%'}, defaultTiming * 1000, function () { $(this).removeAttr('style'); })
 }
 const width = $("#animate").width();
    $("#timer").text(timer);
  timer = timer + 1;
}, 1000);

$("#animate").animate({width: '100%'}, defaultTiming * 1000, function () { $(this).removeAttr('style'); })

Upvotes: 2

Views: 224

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9348

Here is my solution

You need to add Easing property "linear" to animate function.

You were getting slow animation because the default value for easing was "swing"

For more info refer docs http://api.jquery.com/animate/

const defaultTiming = 12;
const added = $(window).width() / defaultTiming;
let timer = 1;
let timerInterval = setInterval(function() {
  if (timer === defaultTiming) {
    timer = 0;
    $("#animate").width(0);
    $("#animate").animate({
      width: '100%'
    }, defaultTiming * 1000, "linear", function() {// add easing property "linear", default is "swing"
      $(this).removeAttr('style');
    })
  }
  const width = $("#animate").width();
  $("#timer").text(timer);
  timer = timer + 1;
}, 1000);

$("#animate").animate({
  easing: 'linear',
  width: '100%'
}, defaultTiming * 1000, "linear", function() {// add easing property "linear", default is "swing"
  $(this).removeAttr('style');
})
div {
  width: 0;
  background: red;
  height: 10px;
}

.chand {
  width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animate"></div>
<div id="timer"></div>

Upvotes: 2

Related Questions