V框架-load

szp1203
szp1203 发布于 5 天前 浏览:65 类型:原创 - 随笔 分类:类库框架 - 框架 二维码: 作者原创 版权保护
最近打算自己写一个动画加载、工具类的框架,持续更新,逐渐完善吧,欢迎多多提意见改进
有趣的效果,简洁的实现方法都可以提出,我会慢慢改进的



第一种加载动画
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .v-cover {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .v-load-dot {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 120px;
            height: 40px;
            margin: auto;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.5);
        }

        .v-load-dot div {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 5px;
            border: none;
            border-radius: 50%;
            background: #ffffff;
            animation: v-load-dot-move ease 0.6s infinite alternate;
            transform-origin: center;
        }

        @keyframes v-load-dot-move {
            0% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(0.6);
            }
        }

        .v-load-dot div:nth-of-type(1) {
            animation-delay: -0.6s;
        }

        .v-load-dot div:nth-of-type(2) {
            animation-delay: -0.3s;
        }

        .v-load-dot div:nth-of-type(3) {
            animation-delay: -0s;
        }

        .v-load-spin {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 50px;
            height: 50px;
            margin: auto;
        }

        .v-load-spin div {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 6px;
            height: 15px;
            margin: auto;
            border: 1px solid #ccc;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.2);
            transform-origin: 3px 25px;
            animation: v-load-spin-move ease 0.4s infinite alternate;
        }

        @keyframes v-load-spin-move {
            0% {
                background: rgba(0, 0, 0, 0.2);
            }
            90% {
                background: rgba(0, 0, 0, 0.2);
            }
            100% {
                background: rgba(0, 0, 0, 0.5);
            }
        }

        .v-load-spin div:nth-of-type(1) {
            transform: rotateZ(20deg);
            animation-delay: -0.8s;
        }

        .v-load-spin div:nth-of-type(2) {
            transform: rotateZ(65deg);
            animation-delay: -0.7s;
        }

        .v-load-spin div:nth-of-type(3) {
            transform: rotateZ(110deg);
            animation-delay: -0.6s;
        }

        .v-load-spin div:nth-of-type(4) {
            transform: rotateZ(155deg);
            animation-delay: -0.5s;
        }

        .v-load-spin div:nth-of-type(5) {
            transform: rotateZ(200deg);
            animation-delay: -0.4s;
        }

        .v-load-spin div:nth-of-type(6) {
            transform: rotateZ(245deg);
            animation-delay: -0.3s;
        }

        .v-load-spin div:nth-of-type(7) {
            transform: rotateZ(290deg);
            animation-delay: -0.2s;
        }

        .v-load-spin div:nth-of-type(8) {
            transform: rotateZ(335deg);
            animation-delay: -0.1s;
        }

    </style>
</head>

<body>

<script>
    'use strict';

    (function (window) {
        window.V = {};
        V.timer = null;

        /**
         * loading animation
         * @param type
         * @param time
         */
        V.load = function (type, time) {
            var _this = this,
                    html = void 0,
                    dot = '<div class="v-load-dot">\n                <div></div>\n                <div></div>\n                <div></div>\n                </div>',
                    spin = '<div class="v-load-spin">\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                </div>';

            switch (+type) {
                case 1:
                    html = dot;
                    break;
                case 2:
                    html = spin;
                    break;
                default:
                    html = dot;
                    break;
            }

            var cover = document.createElement('div');
            cover.className = 'v-cover';
            cover.setAttribute('v-load', '');
            cover.innerHTML = html;
            document.body.appendChild(cover);
            _this.timer = time && setTimeout(function () {
                        var loads = document.querySelector('.v-cover[v-load]');
                        if (loads) document.body.removeChild(loads);
                        clearTimeout(_this.timer);
                    }, time);
        };

        /**
         * close loading animation
         */
        V.closeLoad = function () {
            var loads = document.querySelector('.v-cover[v-load]');
            if (loads) document.body.removeChild(loads);
        };
    })(window);
</script>

<script>
    (function () {
        'use strict';
        V.load(1);
    })();
</script>
</body>

</html>


第二种加载动画
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .v-cover {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .v-load-dot {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 120px;
            height: 40px;
            margin: auto;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.5);
        }

        .v-load-dot div {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 5px;
            border: none;
            border-radius: 50%;
            background: #ffffff;
            animation: v-load-dot-move ease 0.6s infinite alternate;
            transform-origin: center;
        }

        @keyframes v-load-dot-move {
            0% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(0.6);
            }
        }

        .v-load-dot div:nth-of-type(1) {
            animation-delay: -0.6s;
        }

        .v-load-dot div:nth-of-type(2) {
            animation-delay: -0.3s;
        }

        .v-load-dot div:nth-of-type(3) {
            animation-delay: -0s;
        }

        .v-load-spin {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 50px;
            height: 50px;
            margin: auto;
        }

        .v-load-spin div {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 6px;
            height: 15px;
            margin: auto;
            border: 1px solid #ccc;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.2);
            transform-origin: 3px 25px;
            animation: v-load-spin-move ease 0.4s infinite alternate;
        }

        @keyframes v-load-spin-move {
            0% {
                background: rgba(0, 0, 0, 0.2);
            }
            90% {
                background: rgba(0, 0, 0, 0.2);
            }
            100% {
                background: rgba(0, 0, 0, 0.5);
            }
        }

        .v-load-spin div:nth-of-type(1) {
            transform: rotateZ(20deg);
            animation-delay: -0.8s;
        }

        .v-load-spin div:nth-of-type(2) {
            transform: rotateZ(65deg);
            animation-delay: -0.7s;
        }

        .v-load-spin div:nth-of-type(3) {
            transform: rotateZ(110deg);
            animation-delay: -0.6s;
        }

        .v-load-spin div:nth-of-type(4) {
            transform: rotateZ(155deg);
            animation-delay: -0.5s;
        }

        .v-load-spin div:nth-of-type(5) {
            transform: rotateZ(200deg);
            animation-delay: -0.4s;
        }

        .v-load-spin div:nth-of-type(6) {
            transform: rotateZ(245deg);
            animation-delay: -0.3s;
        }

        .v-load-spin div:nth-of-type(7) {
            transform: rotateZ(290deg);
            animation-delay: -0.2s;
        }

        .v-load-spin div:nth-of-type(8) {
            transform: rotateZ(335deg);
            animation-delay: -0.1s;
        }

    </style>
</head>

<body>

<script>
    'use strict';

    (function (window) {
        window.V = {};
        V.timer = null;

        /**
         * loading animation
         * @param type
         * @param time
         */
        V.load = function (type, time) {
            var _this = this,
                    html = void 0,
                    dot = '<div class="v-load-dot">\n                <div></div>\n                <div></div>\n                <div></div>\n                </div>',
                    spin = '<div class="v-load-spin">\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n                </div>';

            switch (+type) {
                case 1:
                    html = dot;
                    break;
                case 2:
                    html = spin;
                    break;
                default:
                    html = dot;
                    break;
            }

            var cover = document.createElement('div');
            cover.className = 'v-cover';
            cover.setAttribute('v-load', '');
            cover.innerHTML = html;
            document.body.appendChild(cover);
            _this.timer = time && setTimeout(function () {
                        var loads = document.querySelector('.v-cover[v-load]');
                        if (loads) document.body.removeChild(loads);
                        clearTimeout(_this.timer);
                    }, time);
        };

        /**
         * close loading animation
         */
        V.closeLoad = function () {
            var loads = document.querySelector('.v-cover[v-load]');
            if (loads) document.body.removeChild(loads);
        };
    })(window);
</script>

<script>
    (function () {
        'use strict';
        V.load(2);
    })();
</script>
</body>

</html>


触发加载的方法
V.load(type,time)
   type: 加载类型
   time: 动画时间

提供一个关闭加载的方法
V.closeLoad();


github地址:https://github.com/bestvist/V
z
给个赞 0 人点赞
收藏 0 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
szp1203 szp1203 作者

不说硬话,不做软事

作者最新