Do you have any Ajax loading image ideas for use with jQuery?

By : Gene R
Source: Stackoverflow.com
Question!

I have a page being loaded with jQuery. The initial load includes 100 records with 6 icons per record. Needless to say, it takes a few seconds to load and I want to give the user a "loading" prompt/animation.

Any ideas?

By : Gene R


Answers

You can do a animation in CCS3, for example if you want a pulse:

The html markup:

<div class="pulse"></div>

The css:

.pulse {
    width: 32px;
    height: 32px;
    margin: 25% auto;
    background-color: #303030;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout{
    0%{
        -webkit-transform:scale(0)
    }
    100%{
        -webkit-transform:scale(1);
        opacity:0
    }
}
@-moz-keyframes scaleout{
    0%{
        -moz-transform:scale(0)
    }
    100%{
        -moz-transform:scale(1);
        opacity:0
    }
}
@-ms-keyframes scaleout{
    0%{
        -ms-transform:scale(0)
    }
    100%{
        -ms-transform:scale(1);
        opacity:0
    }
}
@-o-keyframes scaleout{
    0%{
        -o-transform:scale(0)
    }
    100%{
        -o-transform:scale(1);
        opacity:0
    }
}
@keyframes scaleout{
    0%{
        transform:scale(0);
        -webkit-transform:scale(0)
    }
    100%{
        transform:scale(1);
        -webkit-transform:scale(1);
        opacity:0
    }
}

Or you can create a div with inside image or background image,you have here a few ideas for animation, it have a downloadable set free, enjoy.



Another ressource for loading images : http://www.loadinfo.net/



You may want to set up a global ajax event to show/hide the loading icon. Have a look at: http://docs.jquery.com/Ajax_Events

By : Sugendran


This video can help you solving your question :)
By: admin