loading(正在加载特效)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<title></title>
<script type="text/javascript">
$(function() {
/**
* Created by Administrator on 2015/3/20.
*/
//载入中
document.onreadystatechange = subSomething;
function subSomething() {
if(document.readyState == "complete") {
Mopload();
}
}
function initevent() {
jQuery.event.add();
}
//获取随机数
function getRandom(n) {
return Math.floor(Math.random() * n + 1)
}
function addfourstlye(obj, name, value) {
var four_list = ["-webkit-", "-moz-", "-o-", ""];
for(var i = 0; i < four_list.length; i++) {
obj.css(four_list[i] + name, value);
}
}
function Mopload() {
var load_name_list = ["rotating-plane", "double-bounce", "wave", "wandering-cubes", "pulse", "chasing-dots", "three-bounce", "circle", "cube-grid", "run-ball", "fading-circle"];
var default_load = "rotating-plane";
var default_index = 0;
$("[class^=mop-load]").each(function(index) {
var _mop_html = $(this).html().trim();
var _mop_class = $(this).attr("class");
var _temp = _mop_class.split("mop-load-");
if(_temp.length < 2) {
return;
}
var arr = '<div class="mop-load-div">';
if(_temp[1].trim() * 1 < load_name_list.length) {
arr += '<div class="mop-css-' + _temp[1].trim() + '">'
} else if(_temp[1].trim() == "x") {
arr += '<div class="mop-css-x">';
} else {
return;
}
if(_mop_html == "") {
_mop_html = "Loading……"
} else {
$(this).html(_mop_html);
}
arr += '</div><div class="mop-load-text" >' + _mop_html + '</div></div>';
$(this).html(arr);
//addfourstlye($(this),"transition","height 2s linear 0s;");
$(this).css("text-align", "center");
//$(this).find(".mop-load-div").hide();
})
$("[class^=mop-css]").each(function(index) {
var _mop_class = $(this).attr("class");
var _temp = _mop_class.split("mop-css-");
if(_temp == "mop-css") {
$(this).addClass(default_load);
}
if(_temp[1].trim() == "x") {
var rand = getRandom(load_name_list.length - 1);
$(this).addClass(load_name_list[rand]);
} else if(_temp[1] * 1 < load_name_list.length) {
$(this).addClass(load_name_list[_temp[1]]);
} else {
return;
}
});
$(".double-bounce").each(function(index) {
var arr = '<div class="double-bounce1"></div><div class="double-bounce2"></div>';
$(this).append(arr);
});
$(".wave").each(function(index) {
var arr = '<div class = "rect1" ></div><div class = "rect2" ></div><div class = "rect3" ></div><div class = "rect4" ></div><div class = "rect5" ></div>';
$(this).append(arr);
});
$(".wandering-cubes").each(function(index) {
var arr = '<div class="cube1"></div><div class="cube2"></div>';
$(this).append(arr);
});
$(".chasing-dots").each(function(index) {
var arr = '<div class="dot1"></div><div class="dot2"></div>';
$(this).append(arr);
});
$(".three-bounce").each(function(index) {
var arr = '<div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div>';
$(this).append(arr);
});
$(".circle").each(function(index) {
var arr = '<div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>';
arr += '<div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>';
arr += '<div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>'
$(this).append(arr);
});
$(".cube-grid").each(function(index) {
var arr = '<div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div>';
$(this).append(arr);
});
$(".run-ball").each(function(index) {
var arr = '<span class="sk-inner-circle"></span>';
$(this).append(arr);
});
$(".fading-circle").each(function(index) {
var arr = '<div class="sk-circle1 sk-circle"></div><div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div>';
arr += '<div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div>';
$(this).append(arr);
});
}
})
</script>
<style>
body {
text-align: center;
}
label {
color: red;
}
/***************************************************/
.rotating-plane {
min-width: 60px;
min-height: 60px;
width: 60px;
height: 60px;
background-color: #67CF22;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
-moz-animation: rotateplane 1.2s infinite ease-in-out;
-o-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective( 120px)
}
50% {
-webkit-transform: perspective( 120px) rotateY( 180deg)
}
100% {
-webkit-transform: perspective( 120px) rotateY( 180deg) rotateX( 180deg)
}
}
@-moz-keyframes rotateplane {
0% {
-moz-transform: perspective( 120px)
}
50% {
-moz-transform: perspective( 120px) rotateY( 180deg)
}
100% {
-moz-transform: perspective( 120px) rotateY( 180deg) rotateX( 180deg)
}
}
@-o-keyframes rotateplane {
0% {
-o-transform: perspective( 120px)
}
50% {
-o-transform: perspective( 120px) rotateY( 180deg)
}
100% {
-o-transform: perspective( 120px) rotateY( 180deg) rotateX( 180deg)
}
}
@keyframes rotateplane {
0% {
transform: perspective( 120px) rotateX( 0deg) rotateY( 0deg);
}
50% {
transform: perspective( 120px) rotateX( -180.1deg) rotateY( 0deg);
}
100% {
transform: perspective( 120px) rotateX( -180deg) rotateY( -179.9deg);
}
}
/*
双反弹圆效果
*/
.double-bounce {
min-width: 60px;
min-height: 60px;
position: relative;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
-moz-animation: bounce 2.0s infinite ease-in-out;
-o-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
-moz-animation-delay: -1.0s;
-o-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@-moz-keyframes bounce {
0%,
100% {
-moz-transform: scale(0.0)
}
50% {
-moz-transform: scale(1.0)
}
}
@-o-keyframes bounce {
0%,
100% {
-o-transform: scale(0.0)
}
50% {
-o-transform: scale(1.0)
}
}
@keyframes bounce {
0%,
100% {
transform: scale(0.0);
}
50% {
transform: scale(1.0);
}
}
/*
波纹效果
*/
.wave {
min-width: 60px;
min-height: 60px;
width: 60px;
height: 60px;
}
.wave> div {
background-color: #67CF22;
min-height: 60px;
height: 100%;
width: 10%;
margin-left: 10%;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
-moz-animation: stretchdelay 1.2s infinite ease-in-out;
-o-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.wave .rect2 {
-webkit-animation-delay: -1.1s;
-moz-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.wave .rect3 {
-webkit-animation-delay: -1.0s;
-moz-animation-delay: -1.0s;
-o-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.wave .rect4 {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.wave .rect5 {
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-o-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)
}
}
@-moz-keyframes stretchdelay {
0%,
40%,
100% {
-moz-transform: scaleY( 0.4)
}
20% {
-moz-transform: scaleY( 1.0)
}
}
@-o-keyframes stretchdelay {
0%,
40%,
100% {
-o-transform: scaleY( 0.4)
}
20% {
-o-transform: scaleY( 1.0)
}
}
@keyframes stretchdelay {
0%,
40%,
100% {
transform: scaleY( 0.4);
}
20% {
transform: scaleY( 1.0);
}
}
/*
旋转立方体效果
*/
.wandering-cubes {
min-width: 60px;
min-height: 60px;
position: relative;
}
.cube1,
.cube2 {
background-color: #67CF22;
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
-webkit-animation: cubemove 1.8s infinite ease-in-out;
-moz-animation: cubemove 1.8s infinite ease-in-out;
-o-animation: cubemove 1.8s infinite ease-in-out;
animation: cubemove 1.8s infinite ease-in-out;
}
.cube2 {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes cubemove {
25% {
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
}
50% {
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
}
75% {
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
}
100% {
-webkit-transform: rotate(-360deg)
}
}
@-moz-keyframes cubemove {
25% {
-moz-transform: translateX(42px) rotate(-90deg) scale(0.5)
}
50% {
-moz-transform: translateX(42px) translateY(42px) rotate(-180deg)
}
75% {
-moz-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
}
100% {
-moz-transform: rotate(-360deg)
}
}
@-o-keyframes cubemove {
25% {
-o-transform: translateX(42px) rotate(-90deg) scale(0.5)
}
50% {
-o-transform: translateX(42px) translateY(42px) rotate(-180deg)
}
75% {
-o-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
}
100% {
-o-transform: rotate(-360deg)
}
}
@keyframes cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
}
75% {
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
}
}
/*
脉冲效果
*/
.pulse {
min-width: 60px;
min-height: 60px;
background-color: #67CF22;
border-radius: 100%;
-webkit-animation: scaleout 1.0s infinite ease-in-out;
-moz-animation: scaleout 1.0s infinite ease-in-out;
-o-animation: scaleout 1.0s infinite ease-in-out;
animation: scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0% {
-webkit-transform: scale(0.0)
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@-moz-keyframes scaleout {
0% {
-moz-transform: scale(0.0)
}
100% {
-moz-transform: scale(1.0);
opacity: 0;
}
}
@-o-keyframes scaleout {
0% {
-o-transform: scale(0.0)
}
100% {
-o-transform: scale(1.0);
opacity: 0;
}
}
@keyframes scaleout {
0% {
transform: scale(0.0);
}
100% {
transform: scale(1.0);
opacity: 0;
}
}
/*
追逐点效果
*/
.chasing-dots {
min-width: 60px;
min-height: 60px;
position: relative;
text-align: center;
-webkit-animation: rotate 2.0s infinite linear;
-moz-animation: rotate 2.0s infinite linear;
-o-animation: rotate 2.0s infinite linear;
animation: rotate 2.0s infinite linear;
}
.dot1,
.dot2 {
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
top: 0;
background-color: #67CF22;
border-radius: 100%;
-webkit-animation: bounce 2.0s infinite ease-in-out;
-moz-animation: bounce 2.0s infinite ease-in-out;
-o-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.dot2 {
top: auto;
bottom: 0px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg)
}
}
@-moz-keyframes rotate {
100% {
-moz-transform: rotate(360deg)
}
}
@-o-keyframes rotate {
100% {
-o-transform: rotate(360deg)
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@-moz-keyframes bounce {
0%,
100% {
-moz-transform: scale(0.0)
}
50% {
-moz-transform: scale(1.0)
}
}
@-o-keyframes bounce {
0%,
100% {
-o-transform: scale(0.0)
}
50% {
-o-transform: scale(1.0)
}
}
@keyframes bounce {
0%,
100% {
transform: scale(0.0);
}
50% {
transform: scale(1.0);
}
}
/*
三反弹球
*/
.three-bounce {
min-width: 90px;
min-height: 60px;
text-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari、Opera 以及 Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-o-box-pack: center;
-o-box-align: center;
}
.three-bounce> div {
width: 30%;
height: 30%;
min-height: 30px;
min-width: 30px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
-moz-animation: bouncedelay 1.4s infinite ease-in-out;
-o-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* 防止动画第一帧开始闪烁*/
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.three-bounce .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.three-bounce .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0.0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@-moz-keyframes bouncedelay {
0%,
80%,
100% {
-moz-transform: scale(0.0)
}
40% {
-moz-transform: scale(1.0)
}
}
@-o-keyframes bouncedelay {
0%,
80%,
100% {
-o-transform: scale(0.0)
}
40% {
-o-transform: scale(1.0)
}
}
@keyframes bouncedelay {
0%,
80%,
100% {
transform: scale(0.0);
}
40% {
transform: scale(1.0);
}
}
/*
缓存追逐球
*/
.circle {
min-width: 60px;
min-height: 60px;
position: relative;
}
.container1> div,
.container2> div,
.container3> div {
width: 20%;
height: 20%;
background-color: #67CF22;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
-moz-animation: bouncedelay 1.2s infinite ease-in-out;
-o-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.circle .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}
.container2 {
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.container3 {
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1 {
top: 0;
left: 0;
}
.circle2 {
top: 0;
right: 0;
}
.circle3 {
right: 0;
bottom: 0;
}
.circle4 {
left: 0;
bottom: 0;
}
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
-moz-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
-moz-animation-delay: -1.0s;
-o-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
-moz-animation-delay: -0.7s;
-o-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
-moz-animation-delay: -0.6s;
-o-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
-o-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
-moz-animation-delay: -0.4s;
-o-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
-moz-animation-delay: -0.3s;
-o-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
-moz-animation-delay: -0.2s;
-o-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
-moz-animation-delay: -0.1s;
-o-animation-delay: -0.1s;
animation-delay: -0.1s;
}
/*
舞动的方块效果
*/
/*
* Spinner positions
* 1 2 3
* 4 5 6
* 7 8 9
*/
.cube-grid {
min-width: 60px;
min-height: 60px;
width: 60px;
height: 60px;
}
.cube-grid .sk-cube {
width: 33%;
height: 33%;
min-width: 20px;
min-height: 20px;
background-color: #67CF22;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
-moz-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
-o-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.cube-grid .sk-cube:nth-child(1) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.cube-grid .sk-cube:nth-child(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.cube-grid .sk-cube:nth-child(3) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.cube-grid .sk-cube:nth-child(4) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.cube-grid .sk-cube:nth-child(5) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.cube-grid .sk-cube:nth-child(6) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.cube-grid .sk-cube:nth-child(7) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
.cube-grid .sk-cube:nth-child(8) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.cube-grid .sk-cube:nth-child(9) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes sk-cubeGridScaleDelay {
0%,
70%,
100% {
-webkit-transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
}
}
@-moz-keyframes sk-cubeGridScaleDelay {
0%,
70%,
100% {
moz-transform: scale3D(1, 1, 1);
}
35% {
-moz-transform: scale3D(0, 0, 1);
}
}
@-o-keyframes sk-cubeGridScaleDelay {
0%,
70%,
100% {
-o-transform: scale3D(1, 1, 1);
}
35% {
-o-transform: scale3D(0, 0, 1);
}
}
@keyframes sk-cubeGridScaleDelay {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}
/*
运动的球效果
*/
.run-ball {
background-color: #67CF22;
width: 60px;
height: 60px;
border-radius: 100%;
position: relative;
-webkit-animation: sk-innerCircle 1s linear infinite;
-moz-animation: sk-innerCircle 1s linear infinite;
-o-animation: sk-innerCircle 1s linear infinite;
animation: sk-innerCircle 1s linear infinite;
}
.run-ball .sk-inner-circle {
display: block;
background-color: #fff;
width: 25%;
height: 25%;
position: absolute;
border-radius: 100%;
top: 5px;
left: 5px;
}
@-webkit-keyframes sk-innerCircle {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes sk-innerCircle {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes sk-innerCircle {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
@keyframes sk-innerCircle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
虚落球效果
*/
.fading-circle {
min-width: 60px;
min-height: 60px;
position: relative;
}
.sk-circle {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle:before {
content: '';
display: block;
margin: 0 auto;
width: 18%;
height: 18%;
background-color: #67CF22;
border-radius: 100%;
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
-moz-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
-o-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.sk-circle2 {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.sk-circle3 {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.sk-circle4 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.sk-circle5 {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.sk-circle6 {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-o-transform: rotate(150deg);
transform: rotate(150deg);
}
.sk-circle7 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.sk-circle8 {
-webkit-transform: rotate(210deg);
-moz-transform: rotate(210deg);
-o-transform: rotate(210deg);
transform: rotate(210deg);
}
.sk-circle9 {
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}
.sk-circle10 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.sk-circle11 {
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
}
.sk-circle12 {
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-o-transform: rotate(330deg);
transform: rotate(330deg);
}
.sk-circle2:before {
-webkit-animation-delay: -1.1s;
-moz-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-circle3:before {
-webkit-animation-delay: -1s;
-moz-animation-delay: -1s;
-o-animation-delay: -1s;
animation-delay: -1s;
}
.sk-circle4:before {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-circle5:before {
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.sk-circle6:before {
-webkit-animation-delay: -0.7s;
-moz-animation-delay: -0.7s;
-o-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.sk-circle7:before {
-webkit-animation-delay: -0.6s;
-moz-animation-delay: -0.6s;
-o-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.sk-circle8:before {
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
-o-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.sk-circle9:before {
-webkit-animation-delay: -0.4s;
-moz-animation-delay: -0.4s;
-o-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.sk-circle10:before {
-webkit-animation-delay: -0.3s;
-moz-animation-delay: -0.3s;
-o-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.sk-circle11:before {
-webkit-animation-delay: -0.2s;
-moz-animation-delay: -0.2s;
-o-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.sk-circle12:before {
-webkit-animation-delay: -0.1s;
-moz-animation-delay: -0.1s;
-o-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
0%,
39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
@-moz-keyframes sk-circleFadeDelay {
0%,
39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
@-o-keyframes sk-circleFadeDelay {
0%,
39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
@keyframes sk-circleFadeDelay {
0%,
39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
section[class^=mop-load] {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
overflow: hidden;
}
.flip {
height: 0px;
}
.mop-load-div {
box-pack: center;
box-align: center;
/* Firefox */
height: 100px;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari、Opera 以及 Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-o-box-pack: center;
-o-box-align: center;
}
.loading {
background-position: 0 100%;
-webkit-transform: rotate(0deg) translateZ(0);
-webkit-transition-duration: 0ms;
-webkit-animation-name: loading;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg) translateZ(0);
}
to {
-webkit-transform: rotate(360deg) translateZ(0);
}
}
.mop-load-text {
font-weight: bold;
margin-left: 1.2em;
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<label>样式1</label>
<div class="mop-load-0"></div>
<label>样式2</label>
<div class="mop-load-1"></div>
<label>样式3</label>
<div class="mop-load-2"></div>
<label>样式4</label>
<div class="mop-load-3"></div>
<label>样式5</label>
<div class="mop-load-4"></div>
<label>样式6</label>
<div class="mop-load-5"></div>
<label>样式7</label>
<div class="mop-load-6"></div>
<label>样式8</label>
<div class="mop-load-7"></div>
<label>样式9</label>
<div class="mop-load-8"></div>
<label>样式10</label>
<div class="mop-load-9"></div>
<label>样式11</label>
<div class="mop-load-10"></div>
<label>随机样式</label>
<div class="mop-load-x"></div>
</body>
</html>
插件：
jQuery加载动画插件shCircleLoader
http://www.jq22.com/jquery-info526
