.spinner { margin: 50px auto; width: 50px; height: 60px; text-align: center; font-size: 10px; }
.spinner > div { background-color: #428bca; height: 100%; width: 6px; margin-right: 4px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4); }
    20% { -webkit-transform: scaleY(1.0); }
}
@keyframes stretchdelay {
    0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); }
    20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
}
/**
 * loading
 * html:<div class="info-loading"><span>loading..</span></div>
 */
.info-loading { height: 100%; min-height: 200px; font-size: 14px; line-height: 200px; text-align: center; }
.info-loading span { padding: 2px 0 2px 20px; background: url(../img/loading.gif) no-repeat 0 0; }