(function( $ ) { var loadMore = $('.load-more'); loadMore.bind('click', function() { var currentControl = $(this), text = currentControl.find('.text'), indicator = currentControl.find('.loading-indicator'); // don't let the user to interact // with button while loading if ( currentControl.hasClass('disabled') ) return; currentControl.addClass('disabled'); text.css('visibility', 'hidden'); indicator.css('display', 'block'); $.getJSON('/echo/jsonp/', function() { // get /echo/jsonp is so fast // that we need to setTimeout in order // to see the animation at all setTimeout( function() { currentControl.removeClass('disabled'); text.css('visibility', 'visible'); indicator.css('display', 'none'); }, 2000 ); }); }); })( jQuery );
<!-- inspired by http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit --> <div class="load-more"> <span class="text">Load more</span> <div class="loading-indicator"> <span></span> <span></span> <span></span> </div> </div>
body { font-size:12px; font-family:Tahoma, Geneva, Lucida Grande, sans-serif; } .load-more { background:#def4fb; display:inline-block; border:1px solid #b2c2ca; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; text-decoration:none; color:#478fb3; padding:.8em 1em; position:relative; cursor:pointer; } .load-more.disabled { background:#effafe; } .load-more .loading-indicator { display:none; position:absolute; width:26px; height:10px; left:50%; margin-left:-13px; top:50%; margin-top:-5px; } .load-more .loading-indicator span { float:left; width:6px; height:10px; margin-left:4px; background:#4790b3; -webkit-animation: fade 1s linear infinite; } .load-more .loading-indicator span:first-child { margin:0; -webkit-animation-delay: .333s; } .load-more .loading-indicator span:nth-child(2) { -webkit-animation-delay: .666s; } .load-more .loading-indicator span:nth-child(3) { -webkit-animation-delay: .999s; } @-webkit-keyframes fade { 0% { opacity: 1; -webkit-transform:scaleY(1.5); } 60% { opacity: .25; -webkit-transform:scaleY(1); } 100% { opacity: 0; -webkit-transform:scaleY(1); } }