Page Widget How to - Create loading animation

Question

We would like to know how to create loading animation.
Answer

Revised from http://fiddle.jshell.net/6BDmZ/47/
inspired by http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.6.1.js'></script>
<style type='text/css'>
body {<!--from   w w w  . j  av a 2s. co  m-->
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.fade {
    background-color: lightgray;
}
.load-more {
    background-color: white;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 20px;
    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;
    cursor: pointer;
    text-align: center;
}
.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);
    }
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
(function( $ ) {
    var minimumTime = 2000; //Milliseconds
    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');
        $("body").addClass("fade");
    });
})( jQuery );
});//]]>  
</script>
</head>
<body>
  <!-- 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>
</html>
Click to view the demo