Display percentage complete progress bar on Button Click using JavaScript in ASP.Net

RichardSa
 
on Sep 08, 2021 06:01 AM
578 Views

I created a progress bar that when users click on button to login, the progress bar will load from 0% to 100% full width of screen.

I made use of Threading and set the time to my preferred time but the issue is that the progress bar loads quickly while the page redirects to another page based on the set time.

How can I make the progress bar to go along with the set time?

Here is my code

<style>
    #progressbar
    {
            width: 100%;
            background-color: transparent;
            position: fixed;
            border-radius: 50px;
    }
    #myBar
    {
            width: 0%;
            height: 3px;
            background-color: #00003D;
            border-radius: 50px;
    }
</style>
<div id="progressbar">
    <div id="myBar"></div>
</div> 
<asp:Button ID="loginbtn" runat="server" Text="Login" OnClientClick="move()" class="btn btn-primary navbar-btn" /> 

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.higlighted-5.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    var i = 0;
    function move() {
        if (i == 0) {
            i = 1;
            var elem = document.getElementById("myBar");
            var width = 1;
            var id = setInterval(frame, 10);
            function frame() {
                if (width >= 100) {
                    clearInterval(id);
                    i = 0;
                } else {
                    width++;
                    elem.style.width = width + "%";
                }
            }
        }
    }
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 08, 2021 06:17 AM

Hi RichardSa,

Refer below code.

HTML

<style type="text/css">
    #progressbar {
        width: 100%;
        background-color: transparent;
        position: fixed;
        border-radius: 50px;
    }

    #myBar {
        width: 0%;
        height: 3px;
        background-color: #00003D;
        border-radius: 50px;
    }
</style>
<div id="progressbar">
    <div id="myBar"></div>
</div>
<asp:Button ID="loginbtn" runat="server" Text="Login" OnClientClick="return move()" class="btn btn-primary navbar-btn" />
<script>
    var i = 0;
    function move() {
        if (i == 0) {
            i = 1;
            var elem = document.getElementById("myBar");
            var width = 1;
            var id = setInterval(frame, 50);
            function frame() {
                if (width >= 100) {
                    window.location.reload();
                    clearInterval(id);
                    i = 0;
                } else {
                    width++;
                    elem.style.width = width + "%";
                }
            }
        }

        return false;
    }
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>