This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
How can I create a progress bar that will be loading, and after it finishes loading, it will automatically redirect to next page after 10 seconds?
Here is what I tried, although what I've been able to get is a button such that when the button is clicked, it starts counting and then redirects to another page
I want to create progress bar that will be loading and once it finishes loading, it redirects to another page, using C#
thank you.
HTML
<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>
JavaScript
<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>
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(211.20000000000002, 61%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBS%3C/text%3E%3C/svg%3E)
Use progress element and update the value in your timer
<progress id="progress" value="50" max="100"></progress>
document.getElementById(“progress”).value = (5-seconds) * 20;
Hi @Bruce (SqlWork.com),
I tried using another code to achieve my aim. but it appears I cant achiev it. Please can you take a look at my rewritten code to see if ou help me with effecting correction to achive this?
Here is what I want please, I want to automatically redirect to another page after the progress bar finishes loading. But in this rewritten code, It'sthe progressbar only moves when a button is clicked.
Or maybe this can be done uisng C#
HTML
<style type="text/css">
#progressbar {
width: 100%;
background-color: transparent;
position: fixed;
border-radius: 50px;
}
#myBar {
width: 0%;
height: 3px;
background-color: #0094ff;
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, 100);
function frame() {
if (width >= 100) {
window.location.reload();
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
return false;
}
</script>
Not sure your question. The progress code is only called when you click the button. When did you want to call it. Also what progress does it represent?
Take a look at these two examples:
E.g. 1:
When you click the start button, see the movement of the progress bar. Then you compare that to the movement of the progress bar in example 2.
Example One:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no" />
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link href="https://fonts.cdnfonts.com/css/br-firma" rel="stylesheet" />
<link href="https://db.onlinewebfonts.com/c/2d8cf0a1ae3cf90fc45730a9e56b1db2?family=GD+Boing+Bold" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<script src="https://ajax.googleapis.com/ajax//libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/popper.js/1.6.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link href="css/control.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<title>PhotoBook</title>
<style type="text/css">
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;
}
#progressbar {
width: 100%;
background-color: transparent;
position: page;
border-radius: 50px;
}
#myBar {
width: 0%;
height: 3px;
background-color: #0094ff;
border-radius: 50px;
}
</style>
</head>
<body class="bg">
<form id="form1" runat="server">
<div id="progressbar">
<div id="myBar"></div>
</div>
<asp:Button ID="loginbtn" runat="server" Text="Start" OnClientClick="return move()" class="btn btn-primary navbar-btn" />
</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>
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
window.location.reload();
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
return false;
}
</script>
</body>
</html>
Example Two:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#progressbar {
width: 100%;
background-color: #0094ff;
position: page;
border-radius: 50px;
height: 3px;
}
#myBar {
width: 0%;
height: 3px;
background-color: #0094ff;
border-radius: 50px;
}
</style>
</head>
<body>
<div id="progressbar"></div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(function () {
var increment = 10;
$("#progressbar").progressbar({
value: 0,
max: 100
});
var progressInterval = setInterval(function () {
increment += increment;
if (increment <= 100) {
$("#progressbar").progressbar("option", "value", increment);
} else {
clearInterval(progressInterval);
window.location = 'WebForm1.aspx'
}
}, 1000);
});
</script>
</body>
</html>
I want the progressbar movement to be like in example 1, using example 2
Still not clear the progress bar behavior desired. The second page loads, displays a progress bar, and when progress is done, starts the load the new page.
if the progress bar is for the load of the new page, then the load should start when the progress bar display starts. As you don’t know how long the load takes, typically you slow the progress at the half way point.
note: jquery ui is obsolete and should not be used (and may not work properly during a load). I’d just the html element as in my example