jQuery Loading Plugin

jQuery Loading PluginThis is a simple jQuery loading plugin which shows a nice animated Loading Message.

[crayon lang=”javascript”]
(function( $ ){

var methods = {
init : function( ) {
text = this.text();
textSize = text.length;
wrappedText=””;
for(currentLetter=0; currentLetter<textsize;currentletter++){
letter = text[currentLetter];
wrappedText += “”+letter+””;
}
this.html(wrappedText)
},

start_animation : function(currentLetter ) {
$this = this;
textSize = $this.text().length;
currentLetter = (currentLetter != undefined && currentLetter != textSize) ? currentLetter : 0;
currentLetterWrapper = $(this).children().get(currentLetter);
$(currentLetterWrapper).addClass(“animating”)

$(“.animating”)
.animate({“font-size”: “30px”}, 1000)
.animate({“font-size”: “10px”}, 1000)
$(currentLetterWrapper).removeClass(“animating”)

setTimeout(function(){

methods.start_animation.apply( $this, [++currentLetter] );
}

,100);
}
};

$.fn.animate_loading = function( ) {

methods.init.apply( this, [0] );
methods.start_animation.apply( this, [0] );

};

})( jQuery );
[/crayon]

What is in your html?

[crayon lang=”html”]

loading

[/crayon]

How will you call this loading animation

[crayon lang=”javascript”]
$(document).ready(function(){
$(“.loading”).animate_loading()
});
[/crayon]

Leave a Reply

Your email address will not be published. Required fields are marked *