jsp预加载转圈_页面预加载loading动画

在现在网速跟设备都跟得上的情况下、使用预加载图片感觉效果不大，我们需要做的只是增强用户体验，在加载完成之前加个动画，简单粗暴。网上扒的一篇文章

查看原文：http://www.ibloger.net/article/401.html

效果页面：http://crusader12.com/C12HoverAlls/

首先定义一个loader.css文件，如下内容

.chromeframe {

margin: 0.2em 0;

background: #ccc;

color: #000;

padding: 0.2em 0;}

#loader-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index:999999;}

#loader {

display: block;

position: relative;

left: 50%;

top: 50%;

width: 150px;

height: 150px;

margin: -75px 0 0 -75px;

border-radius: 50%;

border: 3px solid transparent;

/* COLOR 1 */

border-top-color: #FFF;

-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

-ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

-moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

-o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

z-index:1001;}