How can I create a progressbar that will be loading, and after it finishes loading, it will automaticall redirect to next page fter 10 seconds?
Here is what I tried, although what I;ve been ablle to get is a button such that whn th button is clicked, it strts counting and then redirects to another page
I want to create progressbar that will be loading and once it finishes loading, it edirects to another page
thank you.
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("images/home image/Default image.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
width: 100%;
text-align: center;
top: 50%;
bottom: 50%;
font-family: 'GD Boing', sans-serif;
display: block;
}
</style>
<body class="bg">
<form id="form1" runat="server" style="background-image: src()">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="z-index: 1; left: 15px; top: 18px; position: absolute; height: 63px; width: 284px">
<input type="button" value="Redirect to another Page" onclick="RedirectAfterDelayFn()" style="border-width: thick; border-style: double; background-color: #FFFFFF; height: 40px; width: 215px;" />
<br />
<br />
<div id="CountDown" style="display: none">
You will be redirected after
<br />
<span id="CountDownLabel"></span> seconds.
</div>
</div>
</form>
<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 src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function RedirectAfterDelayFn() {
var seconds = 5;
var dvCountDown = document.getElementById("CountDown");
var lblCount = document.getElementById("CountDownLabel");
dvCountDown.style.display = "block";
lblCount.innerHTML = seconds;
setInterval(function () {
seconds--;
lblCount.innerHTML = seconds;
if (seconds == 0) {
dvCountDown.style.display = "none";
window.location = "Home.aspx";
}
}, 1000);
}
</script>
</body>
