Grow your CSS skills. Land your dream job.

Creating a spinner image – jQuery

  • kam
    # August 27, 2011 at 5:05 pm

    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

    # August 28, 2011 at 12:09 am

    Wouldn’t this me a jquery ui modal?

    # August 28, 2011 at 9:01 am

    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
    # August 31, 2011 at 1:31 am

    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

    # August 31, 2011 at 6:39 am

    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.

    # August 31, 2011 at 8:39 am

    Check out Spin.js.

    # August 31, 2011 at 9:40 am

    @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.

    # August 31, 2011 at 10:09 am

    @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?

    # June 8, 2013 at 2:04 am

    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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".