CSS3动画实现loading加载图标，并利用JavaScript封装成插件，方便以后调用。
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>Spinner</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<script src="./js/spinner.js"></script>
<script>
window.onload = function(){
spinner.show();
}
</script>
</body>
</html>spinner.js
(function(exports){
var document = exports.document,
mask = createDivWithClassName(‘spinner-mask‘),
box = createDivWithClassName(‘spinner-box‘),
spinner = createDivWithClassName(‘spinner‘),
spinner_container_1 = createDivWithClassName(‘spinner-container‘),
spinner_container_2,
spinner_container_3,
circle_1 = createDivWithClassName(‘circle1‘),
circle_2 = createDivWithClassName(‘circle2‘),
circle_3 = createDivWithClassName(‘circle3‘),
circle_4 = createDivWithClassName(‘circle4‘);
spinner_container_1.appendChild(circle_1);
spinner_container_1.appendChild(circle_2);
spinner_container_1.appendChild(circle_3);
spinner_container_1.appendChild(circle_4);
spinner_container_2 = spinner_container_1.cloneNode(true);
spinner_container_3 = spinner_container_1.cloneNode(true);
spinner_container_1.className += ‘ container1‘;
spinner_container_2.className += ‘ container2‘;
spinner_container_3.className += ‘ container3‘;
spinner.appendChild(spinner_container_1);
spinner.appendChild(spinner_container_2);
spinner.appendChild(spinner_container_3);
box.appendChild(spinner);
document.body.appendChild(mask);
document.body.appendChild(box);
var self = Object.create(null);
self.show = function(){
mask.style.display = box.style.display = ‘block‘;
};
self.hide = function(){
mask.style.display = box.style.display = ‘none‘;
};
Object.seal(self);
Object.freeze(self);
Object.preventExtensions(self);
exports.spinner = self;
function createDivWithClassName(classname){
var div = document.createElement(‘div‘);
div.setAttribute(‘class‘, classname);
return div;
}
})(window);main.css
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
.spinner-mask{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: transparent;
display: none;
}
.spinner-box{
width: 60px;
height: 60px;
position: fixed;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
background-color: #666;
border-radius: 4px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: none;
}
.spinner{
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.container1>div, .container2>div, .container3>div{
width: 6px;
height: 6px;
background-color: #eee;
border-radius: 50%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .spinner-container{
width: 100%;
height: 100%;
position: absolute;
}
.container2{
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.container3{
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1{
left: 0; top: 0;
}
.circle2{
right: 0; top: 0;
}
.circle3{
right: 0; bottom: 0;
}
.circle4{
left: 0; bottom: 0;
}
.container1 .circle1{
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.container2 .circle1{
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1{
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2{
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2{
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2{
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3{
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3{
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3{
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4{
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4{
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4{
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay{
0%, 100%{
-webkit-transform: scale(0);
transform: scale(0);
}
50%{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bouncedelay{
0%, 100%{
-webkit-transform: scale(0);
transform: scale(0);
}
50%{
-webkit-transform: scale(1);
transform: scale(1);
}
}版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-14 06:38:40