CSS3动画实现loading加载图标

最新推荐文章于 2024-06-25 16:25:32 发布

herbertyoung

最新推荐文章于 2024-06-25 16:25:32 发布

阅读量1.9k

点赞数 1

分类专栏： CSS JavaScript 文章标签： css3 动画 loading

本文链接：https://blog.csdn.net/yhb241/article/details/47258349

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

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