BootstrapCSSHTMLJavaScriptjQuery

How to create progress timer bar using Bootstrap and jQuery

0
2.7k
2018 / 05 / 11

A progress bar with event can be created by using jquery.progressTimer.js library. The library can be downloaded from here.

The library can be integrated with Bootstrap and it doesnot conflict with it javascript. The code for creating the timer progress bar is below.

 

The HTML code:

<div id="progressTimer"></div>

 

The CSS code:

#progressTimer {
    width:560px;
    height:5px;
}

 

The jQuery code:

$("#progressTimer").progressTimer({
    timeLimit: 20,
    warningThreshold: 10,
    baseStyle: 'progress-bar-warning',
    warningStyle: 'progress-bar-danger',
    completeStyle: 'progress-bar-info'
});

 

You can also get event when the progress bar is completed. The event can be detected as:

<script>
    $("#progressTimer").progressTimer({
        timeLimit: 20,
        warningThreshold: 10,
        baseStyle: 'progress-bar-warning',
        warningStyle: 'progress-bar-danger',
        completeStyle: 'progress-bar-info',
        onFinish: function() {
            console.log("I'm done");
        }
    });
</script>

 

The full code is

<!DOCTYPE html>
<html lang='en' class=''>
<head>
    <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css'>

    <style class="cp-pen-styles">
        #progressTimer {
            width:560px;
            height:5px;
        }
    </style>
</head>
<body>
    <div id="progressTimer"></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: 'progress-bar-warning',
            warningStyle: 'progress-bar-danger',
            completeStyle: 'progress-bar-info',
            onFinish: function() {
                console.log("I'm done");
            }
        });
    </script>
</body>
</html>

 

Hi, I am a full-stack web developer with 5+ years of experience in working with different web technologies. Do you want to ask something? just send me a message through the contact form. Please visit my portfolio at hamzamehmood.com. Thanks