how to show progressbar while clicking on button using javascript?

Question

3.00/5 (1 vote)

See more:

helo friends..

i m working on website in which i have implemented code for progressbar using jquery as shown below.but i stucked in it badly that is when i am clicking asp button ,its showing me progressbar but the problem is ones it is started and then it not stopping.i tried all ways but not getting the solution.
please help me friends .its urgent.

thanks in advance.

I have written the following code in jquery:

C#

function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('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();
    });

following code in .cs file

C#

protected void btnLogin_Click(object sender, EventArgs e)
    {
        string script = "$(document).ready(function () { $('[id*=btnLogin]').click(); });";
        ClientScript.RegisterStartupScript(this.GetType(), "click", script, true);
        int CurrentRoleID = 0;
        System.Threading.Thread.Sleep(1000);

and in .aspx page file:

XML

<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="images/googleballs.gif" alt="" />
</div>

Posted 29-May-13 2:05am

Aysha Patel

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ankitkumar Bhatt · Answer 1 · 2013-05-29T02:44:00

Instead of that you can try the following,

Give CssClass="btnSubmit" to your Button and write the following in script tag into head part

C#

$(document).ready(function () {
            $(".btnSubmit").click(function () {
                $('#dvLoader').show();
                if ($("#aspnetForm").valid()) {
                    return true;
                }
                else {
                    $('#dvLoader').hide();
                    return false;
                }
            });
        });

and the code of

having id dvLoader is

HTML

<div id="dvLoader" style="display: none;"> 
                <div id="updateProgressBackgroundFilter" style="background-color: Gray;<br mode=" hold=" />                    filter: alpha(opacity=80); opacity: 0.80; width: 100%; top: 0px; left: 0px; position: fixed;<br mode=">
                </div>
                <div class="centered" style="font-family: Trebuchet MS;<br mode=" hold=" />                    filter: alpha(opacity=100); opacity: 1; font-size: small; position: absolute;<br mode=">
                    <img alt="Loading" src="../Images/ajax_loader.gif" height="150" width="150" />
                </div>
            </div>

Here put your loading image instead of "../Images/ajax_loader.gif". if you want your image in center add this css in header part.

HTML

<style type="text/css"> 
        .centered
        {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -75px;
        }
    </style>

I have already added this class to the div.

I hope this will work fine for you.