jQuery Loading Plugin
This is a simple jQuery loading plugin which shows a nice animated Loading Message.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
(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 ); |
What is in your html?
|
1 |
<div class="loading">loading</div> |
How will you call this loading animation
|
1 2 3 |
$(document).ready(function(){ $(".loading").animate_loading() }); |