Display Progress Bar on Page Load in Using Jquery

16 Jun 2015 Kamal Pratap
1 Comments 5337 Views

In this tutorial we explain how to show progress bar on page load in using jquery. Here we click on button from code behind and progress bar will display on the page.


Display Progress Bar on Page Load in Using Jquery

Asp.Net :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <title>Progress Bar In Asp.Net Using JQuery On Page Load</title>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                var loading = $(".loading");
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        $('form').live("submit", function () {
    <style type="text/css">
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            filter: Alpha(Opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.6;
            min-height: 100%;
            width: 100%;
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
    <form id="form1" runat="server">
    <asp:Button ID="btnProgress" runat="server" Text="Show Progress" Style="display: none;"
        OnClick="btnProgress_Click" />
        function click() {
        <div class="loading" align="center">
            <br />
            Loading. Please wait.<br />
            <br />
            <img src="img/progress.gif" alt="" width="150" />

C# Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;

public partial class Default4 : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            ScriptManager.RegisterStartupScript(this, GetType(), "click", "click();", true);
    protected void btnProgress_Click(object sender, EventArgs e)


Kamal Pratap

I have 6+ years experience in .Net technologies like Asp.Net, C#, WCF, Web Services, SQL Server, Ajax, LinQ. Currently I am working in Netcarrots Loyalty Services as a Software Developer.


No coments found to display!

Leave a Comment