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

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>