When you work on projects you will have to create a progress timer bar to make UX (user-experience) better. For longer actions, we can introduce a progress bar that will not only show the current progress to users but also let them wait until the action is completed. In this article, we will see how to create a progress timer bar using Bootstrap and jQuery.
In this article, we have used a library jquery.progressTimer.js to create a progress timer bar using Bootstrap and jQuery. This library can be downloaded from here.
Let’s write the code
The library (jquery.progressTimer.js) can also be integrated with Bootstrap. It does not conflict with its javascript. The code for creating the timer progress bar is below.
HTML:
<div id="progressTimer"></div>
CSS:
#progressTimer {
width:560px;
height:5px;
}jQuery:
$("#progressTimer").progressTimer({
timeLimit: 20,
warningThreshold: 10,
baseStyle: 'bg-warning progress-bar-striped progress-bar-animated',
warningStyle: 'bg-danger progress-bar-striped progress-bar-animated',
completeStyle: 'bg-info progress-bar-striped progress-bar-animated',
});The event will trigger when the progress bar completes. The library has an event onFinish which fires it when the progress completes. The code to initialize the function is below:
$("#progressTimer").progressTimer({
timeLimit: 20,
warningThreshold: 10,
baseStyle: 'bg-warning progress-bar-striped progress-bar-animated',
warningStyle: 'bg-danger progress-bar-striped progress-bar-animated',
completeStyle: 'bg-info progress-bar-striped progress-bar-animated',
onFinish: function() {
console.log("I'm done");
}
});You can perform any action when the timer finishes, just for example we have simply printed a message in the console.
The progress bar will look like the below:
The full code for the progress timer bar
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" />
<style class="cp-pen-styles">
#progressTimer {
width: 560px;
height: 5px;
}
</style>
</head>
<body>
<div id="progressTimer" class="progress-bar-striped progress-bar-animated"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://www.jqueryscript.net/demo/Easy-jQuery-Progress-Bar-Timer-Plugin-For-Bootstrap-3-progressTimer/js/jquery.progressTimer.js'></script>
<script>
$("#progressTimer").progressTimer({
timeLimit: 20,
warningThreshold: 10,
baseStyle: 'bg-warning progress-bar-striped progress-bar-animated',
warningStyle: 'bg-danger progress-bar-striped progress-bar-animated',
completeStyle: 'bg-info progress-bar-striped progress-bar-animated',
onFinish: function() {
console.log("I'm done");
}
});
</script>
</body>
</html>In the next article, we will see how to add a reading progress bar indicator in WordPress posts using the plugin method.
