CSS3动画实现loading加载图标

来源：互联网发布：小学生绘画软件下载编辑：程序博客网时间：2024/05/01 03:38

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);    }}

1 0