CSS3动画实现loading加载图标

CSS3动画实现loading加载图标，并利用JavaScript封装成插件，方便以后调用。

index.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 p = document.createElement('p');
        p.setAttribute('class', classname);
        return p;
    }
})(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>p, .container2>p, .container3>p{
    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);
    }
}