jQuery

How to create a progress bar using jQuery

In this article we will learn How to create a progress bar using jQuery ?
Here you will learn create a simple animated jquery progress bar using animate() function.

create-progress-bar-using-jquery

create-progress-bar-using-jquery

How to create a progress bar using jQuery ?
Let’s start up with the HTML markup:

<body>
    Select Value &nbsp;
    <select id="ddlPercentageValue">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
        <option value="60">60</option>
        <option value="70">70</option>
        <option value="80">80</option>
        <option value="90">90</option>
        <option value="100">100</option>
    </select>
    <br /><br />
    <div id="outerDiv" style="background-color:#EEEEEE;
         height:20px; width:500px; padding:5px">
        <div id="innerDiv" style="background-color:darkcyan; height:20px;
             width:0px; color:white; text-align:center">
        </div>
    </div>
</body>

Add jQuery library link

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Add jQuery Code for How to create a progress bar using jQuery

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#ddlPercentageValue').change(function () {
                animateProgressBar($('#ddlPercentageValue').val());
            });

            function animateProgressBar(percentageCompleted) {
                $('#innerDiv').animate({
                    'width': (500 * percentageCompleted) / 100
                }, 3000);

                $({ counter: 1 }).animate({ counter: percentageCompleted }, {
                    duration: 3000,
                    step: function () {
                        $('#innerDiv').text(Math.ceil(this.counter) + ' %');
                    }
                })
            }
        });
    </script>

Complete Code :

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#ddlPercentageValue').change(function () {
                animateProgressBar($('#ddlPercentageValue').val());
            });

            function animateProgressBar(percentageCompleted) {
                $('#innerDiv').animate({
                    'width': (500 * percentageCompleted) / 100
                }, 3000);

                $({ counter: 1 }).animate({ counter: percentageCompleted }, {
                    duration: 3000,
                    step: function () {
                        $('#innerDiv').text(Math.ceil(this.counter) + ' %');
                    }
                })
            }
        });
    </script>
</head>
<body>
    Select Value &nbsp;
    <select id="ddlPercentageValue">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
        <option value="60">60</option>
        <option value="70">70</option>
        <option value="80">80</option>
        <option value="90">90</option>
        <option value="100">100</option>
    </select>
    <br /><br />
    <div id="outerDiv" style="background-color:#EEEEEE;
         height:20px; width:500px; padding:5px">
        <div id="innerDiv" style="background-color:darkcyan; height:20px;
             width:0px; color:white; text-align:center">
        </div>
    </div>
</body>
</html>

Any Question and suggestion related to this article please comment me. Thank You

Leave a Reply

Your email address will not be published. Required fields are marked *