Show loading image and text while aspx page is loading

Question

I have a page which when it is opened it starts running a method that takes 40 to 60 seconds to complete. I put a loading circle gif on the page but it doesn't appear until after the code is finished working. How can I make sure that the image is visible first?

Update:

I can successfully get a task to run my code after the gif appears. However, i need to either update the page or open another page after the task is complete. I have attempted the code below. When the testLabel.visible = true line is hit the label does not appear.

Any guidance to what i am doing wrong would be massively appreciated.

Code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            User currentUser = (User)Session["user"];
            Task task = new Task(() => StartProcessingAsync(currentUser));
            task.Start();
        }
    }

    public async void StartProcessingAsync(User currentUser)
    {
        await AsyncProcessing(currentUser);
        testLabel.Visible = true;
    }

    private async Task AsyncProcessing(User currentUser)
    {
        Company newCompany = CreateCompany();
        CreateUsers(newCompany, currentUser);          
    }

Answer 1

Try this:

$(function () {        
    $("#btnSubmit").click(function () {

            $("#loading").fadeIn();
            var opts = {
                lines: 12, // The number of lines to draw
                length: 7, // The length of each line
                width: 4, // The line thickness
                radius: 10, // The radius of the inner circle
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false // Whether to use hardware acceleration
            };
            var target = document.getElementById('loading');
            var spinner = new Spinner(opts).spin(target);
        }
    }); 
});


<div id="loading">
    <div id="loadingcontent">
        <p id="loadingspinner">
            Loading...
        </p>
    </div>
</div>     

<style>    
    #loading {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }

    #loadingcontent {
        display: table;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #loadingspinner {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        text-align: center;
        font-size: larger;
        padding-top: 80px;
    }
</style>

Source: Waiting spinner for long-running form submits in ASP MVC3 Razor using jQuery

Answer 2

I ended up building the long running method into a ASP.net RESTful web API which I call asynchronously when the page is loaded. I have eliminated any waiting required on the page and an email is sent to the logged in user when it has finished running which gives them the results.