How to display progress bar until whole aspx is loading in asp.net c#
Question
i want to display the progress bar until whole .aspx is loading in asp.netc# but it is not working please help me out.progress bar is complete while page is loading.but i want How to show progress bar on web page until web page is fully loaded? on button click. var size = 2; var id = 0;
function ProgressBar() {
document.getElementById("divProgress").style.display = "block";
document.getElementById("divUpload").style.display = "block";
id = setInterval("progress()", 20);
return true;
}
function progress() {
size = size + 1;
if (size > 299) {
clearTimeout(id);
}
document.getElementById("divProgress").style.width = size + "pt";
document.getElementById("<%=lblPercentage.ClientID %>").firstChild.data = parseInt(size / 3) + "%";
}
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FU_IncomingFile"runat="server"/>
<asp:Label ID="lblPercentage" runat="server" Text="Label"></asp:Label>
</div>
<asp:Button ID="btnUpload" runat="server" CssClass="btn btn-sm theme-blue theme-red theme-pink theme-orange theme-cyan theme-green" Text="Upload" OnClientClick="return ProgressBar()" OnClick="btnUpload_Click" />
<div id="divUpload" style="display: none">
<div style="width: 300pt; text-align: center;">
Uploading...
</div>
<div style="width: 300pt; height: 20px; border: solid 1pt gray">
<div id="divProgress" runat="server" style="width: 1pt; height: 20px; background-color: orange; display: none">
</div>
</div>
<div style="width: 300pt; text-align: center;">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<br />
<asp:Label ID="Label2" runat="server" ForeColor="Red" Text=""></asp:Label>
</div>
protected void btnUpload_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(8000);
Label1.Text = "Upload successfull!";
}
2 answers
solution1
0 2016-09-28 14:37:56
A progress bar realistically isnt the right thing. On the page load or pre load event how will you know and feed back to your front end that the page is loading \\ loaded to 100%.
Ideally (in my opinion)You would want to have a loading and a main div, one visible, one hidden and then when your page is fully loaded, you use some JQuery to hide the loading div and then show the main div.
Take a look at http://fontawesome.io/examples/ for a spinner to place in the laoding div.
Then have some JQuery that will fire when the page has completed loading
`$(document).ready(function(){
$('#loadingDiv').hide();
$('#mainDiv').show();
});`
This way your use(s) will have the visual to show that the page is loading if it takes some time to complete.
and then when its fully rendered the loading div will go away and the main div will show
solution2
0 2016-09-28 14:40:33
I would recommend using JavaScript to listen for the document to end loading. You can use this even listener by replacing fn with your desired progress bar startup function.
document.addEventListener('DOMContentLoaded', fn, false);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.