Add Loader in Website using JQuery | 1 Line of Code

Published: 12 June 2021
on channel: Knowledge Thrusters

954

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');
}
});
});

Watch video Add Loader in Website using JQuery | 1 Line of Code online without registration, duration 03 minute 09 second in high hd quality. This video was added by user Knowledge Thrusters 12 June 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 954 once and liked it 13 people.