Article

Display Progress Bar on Page Load in Asp.net Using Jquery

16 Jun 2015 Kamal Pratap
1 Comments 1988 Views



In this tutorial we explain how to show progress bar on page load in asp.net 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 Asp.net Using Jquery

Asp.Net :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Progress Bar In Asp.Net Using JQuery On Page Load</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modaldiv");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                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 () {
            ShowProgress();
        });
       
    </script>
    <style type="text/css">
        .modaldiv
        {
            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%;
        }
        .loading
        {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="btnProgress" runat="server" Text="Show Progress" Style="display: none;"
        OnClick="btnProgress_Click" />
    <script>
        function click() {
            document.getElementById("btnProgress").click();
        }
    </script>
    <div>
        <div class="loading" align="center">
            <br />
            Loading. Please wait.<br />
            <br />
            <img src="img/progress.gif" alt="" width="150" />
        </div>
    </div>
    </form>
</body>
</html>

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)
    {
        Thread.Sleep(5000);
    }
}

 

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.

Comments

No coments found to display!

Leave a Comment