Add Loader in Website using JQuery | 1 Line of Code
In this tutorial, you will be able to add loader to your website using bootstrap progress bar
For animation, jQuery animate function on progress bar is used.
We need to set width of progress bar using jquery
In animate function, first is css property , here is width
second is options in which we will be using
duration - A string or number determining how long the animation will run.
complete - A function that is called once the animation on an element is complete.
Animate link :
For adding progress bar, you can use this code
div class="progress"
div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" /div
/div
for animation
$(document).ready(function(){
$('.progress-bar').animate(
{width:'100%'},
{ duration:3000,
complete:function(){
$('.progress').css('visibility','hidden');
}
});
});
