How To Create Progress Bar Loader For Page Using JQuery

Posted By Bajarangi soft , Posted On 15-01-2021

Onclick of button we can show page progress bar loader using jquery .So today we discuss how to create page progress bar loader using jquery

How To Create Progress Bar Loader For Page Using JQuery

Let's Start
Step 1:Create index.html and implement below html code in it.

<div class="container">
   <div class="text-center">
       <br> <br> <br> <br> <br> <br>
       <h4>How To Create Progress Bar Loader For Page Using JQuery</h4>
   </div>
        <div class="row">
            <div class="col-md-12">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                        0%
                    </div>
                </div>
            </div>
        </div>
    <button class="btn btn-success" id="submit">Save</button>
</div>

Step 2:Now Create jquery function to progress bar onclick of button in same index.html.

<script>
    $(document).ready(function () {
        $('.progress-bar').show();
        $("#submit").click(function () {
            var progressBar = $('.progress-bar');
            var percentVal = 0;

            window.setInterval(function(){
                percentVal += 10;
                progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');

                if (percentVal == 100)
                {
                    percentVal = 0;
                    $('.progress-bar').hide();
                }

            }, 500);
    });
    });

</script>

Complete Code For Creating Progress Bar Loader For Page Using JQuery.

<!doctype html>
<html lang="en">
<head>
    <title> How To Create Progress Bar Loader For Page Using JQuery</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

<div class="container">
   <div class="text-center">
       <br> <br> <br> <br> <br> <br>
       <h4>How To Create Progress Bar Loader For Page Using JQuery</h4>
   </div>
    <br> <br> <br> <br> <br> <br>
        <div class="row">
            <div class="col-md-12">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        0%
                    </div>
                </div>
            </div>
        </div>
    <br> <br>
    <button class="btn btn-success" id="submit">Save</button>
</div>

</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        $('.progress-bar').show();
        $("#submit").click(function () {
            var progressBar = $('.progress-bar');
            var percentVal = 0;

            window.setInterval(function(){
                percentVal += 10;
                progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');

                if (percentVal == 100)
                {
                    percentVal = 0;
                    $('.progress-bar').hide();
                }

            }, 500);
    });
    });

</script>