Creating a spinner image – jQuery

[kam]

I’m trying to create a spinner image that will be displayed when I’m uploading a file.

I’ve got the gif from http://www.ajaxload.info/ and got the hooks into the submit button that presently brings up an alert. But I can’t figure out how to darken the whole browser and place the spinner gif in the center over all the other elements (zindex ??). OK, actually in the center in $(document).width() – image.width() / 2 etc.

So any ideas on how to darken the browser and place the image in the direct center?

Thanks,
Kevin

[djpic]

Wouldn’t this me a jquery ui modal?

[Mottie]

Hi djpic!

Nope, you don’t need UI at all. Here is a demo ( I used my favorite “spinner” image in it :P ).

Basically the jQuery adds an overlay to the page with the loading image inside. Then it needs code to remove itself – this is done by either by clicking on the overlay or by hitting escape.

To use this code, just call the “loading” function:

var loading = function() {

// add the overlay with loading image to the page

var over = '
' +

'' +

'
';

$(over).appendTo('body');



// click on the overlay to remove it

$('#overlay').click(function() {

$(this).remove();

});



// hit escape to close the overlay

$(document).keyup(function(e) {

if (e.which === 27) {

$('#overlay').remove();

}

});

};

Now you just need some css magic ;)

#overlay {

/* stretch the overlay by attaching all four corners */

position: absolute;

left: 0;

top: 0;

bottom: 0;

right: 0;

/* use any background color you like; rgba would be nice, but older IE will ignore it*/

background: #000;

opacity: 0.8;

filter: alpha(opacity=80);

}

#loading {

width: 50px;

height: 57px;

position: absolute;

top: 50%;

left: 50%;

/* the image is 50x57, so we use negative margins of 1/2 that size to center it*/

margin: -28px 0 0 -25px;

}

[kam]

Thanks, for everything guys!. I’ve had most of what you suggested just missed a few key pieces, like opacity and absolute.

I am left with one big problem though. The animated spinner gif – which works fine when I call http://www.mypage.com/spinner.gif – ALWAYS freezes when I implement the above and use it to upload a file.

Is the act of uploading the file cancel out any cycles to re-paint the screen spinning the gif?

Thanks
Kevin

[Mottie]

The gif animation shouldn’t stop… but I guess it depends on the length of the file you’re uploading and how fast your browser is. Did you try it on Chrome? And does it freeze there? I don’t deal that much with file uploading, so maybe someone else here or over on Stackoverflow.com knows better.

[jamygolden]

Check out Spin.js.

[Mottie]

@jamy_za Well heck, I did something similar to that too LOL – but I still don’t know why a gif would pause unless there was a lot of lag.

[jamygolden]

@Mottie yeah, the only reason I could imagine a gif freezing is poor connection, however, I generally have gifs load very slowly when I open them. Each frame lasts about 1 or 2 seconds and it continues smoothly once it’s completed the last frame. Maybe that’s what @kam is experiencing?

[dhimage]

i know how to load an image, but not so clear about how to [creat a spinner image c#](http://www.rasteredge.com/how-to/csharp-imaging/create-new-image/ “”), do you have a tutorial for that. thank you in advance

[Author]

Posts