How to show Jquery progress bar in ASP.NET Web application?

In this article I will explain How to show Jquery progress bar in ASP.NET Web application.

My Agenda is when I click the Order button then show the Progress bar, once the process is completed then progress bar will be closed automatically.

First we need add below two Jquery scripts in Scripts folder.

Add Jquery reference in .aspx page.

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>

Below is the code for conformation for process . Click the Ok button, Progress is showed.

        function Confirm() {

            var r = confirm('Are you Sure you want Place the Order ?');

            if (r == true) {

                loadPopup();

                return true;

            }

            else {

                return false;

            }

        }

Please add loading image to your image folder. Below lines of code is useful for showing progress bar in web application.  

function loadPopup() {

            $.blockUI({ message: '<div style="vertical-align:middle;"> <img heigt="80" width="80" src="./Images/loading.gif" /> <div style="vertical-align:middle;font-family:Times New Roman;font-size:medium;padding-bottom:2px;">Please Wait...<br/></div></div>' });

        }

Below lines of code in useful for closing the Progress bar

        function stopPopup() {

            $.unblockUI();

        }

Please add below lines on code in Page load event.

protected void Page_Load(object sender, EventArgs e)

    {

      btnOrderNow.OnClientClick = string.Format("Confirm();");

    }