纯js css3 实现loading demo

提供 show    redo  hide 三个函数

支持callback，自动隐藏，锁屏幕不可滚动

loading.js

var browser = {    versions: function () {        var u = navigator.userAgent, app = navigator.appVersion;        return {            wp: u.indexOf("Windows Phone") > -1,//windows phone            trident: u.indexOf('Trident') > -1, //IE内核            presto: u.indexOf('Presto') > -1, //opera内核            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核            mobile: !!u.match(/Mobile/), //是否为移动终端            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器            iPad: u.indexOf('iPad') > -1, //是否iPad        };    }()};var ctrlType = browser.versions.mobile ? 'tap' :'click';//LOADER.show()//var loader = new LOADER();var LOADER = function(option){var bg = document.createElement("loader");bg.id = new Date().getTime();bg.classList.add("loaded");var l,r,btn;var lockScroll = false;this.options = {scrolled : false,autohide : false,duration : 6500};for (var key in option) {        if (options.hasOwnProperty(key)) {            if(key == "duration") {            this.options[key] = option[key] || 6500;            } else {            this.options[key] = option[key];            }        }   };   var init = function() {l = document.createElement("div");l.style.display = "none";l.className = "ball-clip-rotate";for(var i = 0; i <1 ;i++) {var ball = document.createElement("div");l.appendChild(ball);}bg.appendChild(l);r = document.createElement("div");r.style.display = "none";r.classList.add("btn-commit");r.classList.add("redo");btn = document.createElement("span")$(btn).html("刷新");r.appendChild(btn);bg.appendChild(r);$(btn).on(ctrlType,function(e){self.show();});};var scrollListener = function(e) {if(lockScroll){e.preventDefault();e.stopPropagation();}};var append = function() {if(!document.getElementById(bg.id)) {   document.body.appendChild(bg);   }}   this.show = function(callback) {   append();   l.style.display = "block";r.style.display = "none";if(!self.options.scrolled){lockScroll = true;$("body").on("touchmove", scrollListener);}if(self.options.autohide) {setTimeout(function(){self.hide(callback);},self.options.duration);} else {if (callback) {callback.call(self);}}};this.hide = function(callback) {document.body.removeChild(bg);lockScroll = false;$("body").off("touchmove", scrollListener);if (callback) {callback.call(callback);}};this.redo = function(callback){append();l.style.display = "none";r.style.display = "block";if(callback) {$(btn).on(ctrlType,callback);$(btn).on(ctrlType,function m(){$(btn).off(ctrlType,callback);$(btn).off(ctrlType,m);})}if(!self.options.scrolled){lockScroll = true;$("body").on("touchmove", scrollListener);}};var self = this;init();return self;};

loading.css

loader {opacity: 0;background-color: rgba(255,255,255,0.5);display: flex;flex: 0 1 auto;flex-direction: row;flex-wrap: wrap; justify-content: center;align-items: center;width: 100%;height: 100%;position: fixed;z-index: 99999;margin: auto;top: 0;left: 0;right: 0;}loader.loaded {transition: opacity .25s linear;opacity: 1;}.ball-clip-rotate > div {background-color: #fff;width: 15px;height: 15px;border-radius: 100%;margin: 2px;-webkit-animation-fill-mode: both;        animation-fill-mode: both;border: 2px solid #b9b9b9;border-bottom-color: transparent;height: 25px;width: 25px;background: transparent !important;display: inline-block;-webkit-animation: rotate 0.75s 0s linear infinite;        animation: rotate 0.75s 0s linear infinite; }@keyframes rotate {  0% {    -webkit-transform: rotate(0deg) scale(1);            transform: rotate(0deg) scale(1); }  50% {    -webkit-transform: rotate(180deg) scale(0.6);            transform: rotate(180deg) scale(0.6); }  100% {    -webkit-transform: rotate(360deg) scale(1);            transform: rotate(360deg) scale(1); } }@keyframes scale {  30% {    -webkit-transform: scale(0.3);            transform: scale(0.3); }  100% {    -webkit-transform: scale(1);            transform: scale(1); } }.ball-clip-rotate-pulse {  position: relative;  -webkit-transform: translateY(-15px);      -ms-transform: translateY(-15px);          transform: translateY(-15px); }.ball-clip-rotate-pulse > div {    -webkit-animation-fill-mode: both;            animation-fill-mode: both;    position: absolute;    top: 0px;    left: 0px;    border-radius: 100%; }.ball-clip-rotate-pulse > div:first-child {      background: #fff;      height: 16px;      width: 16px;      top: 9px;      left: 9px;      -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;              animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; }.ball-clip-rotate-pulse > div:last-child {      position: absolute;      border: 2px solid #fff;      width: 30px;      height: 30px;      background: transparent;      border: 2px solid;      border-color: #fff transparent #fff transparent;      -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;              animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;      -webkit-animation-duration: 1s;              animation-duration: 1s; }              .btn-commit {    width: 100%}.btn-commit span {    width: 90%;    text-align: center;    display: block;    border: 1px solid #DFDFDF;    padding: 0.1rem 0;    margin: 0 auto;    border-radius: 0.05rem;}.btn-commit.redo span {width: 25%;}

loading.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title></title><script src="zepto.min.js" type="text/javascript" charset="utf-8"></script><script src="zepto.touch.min.js" type="text/javascript" charset="utf-8"></script><script src="laoding.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="loading.css"/><script>//var lo = new LOADER({//scrolled = true //true 可滚动， false不可滚动  默认false//,autohide = true //true 自动隐藏 , 默认false//,duration = 1000 //自动隐藏延迟 默认6500毫秒//});var lo = new LOADER();var flag = true;function temopShow() {lo.show(function(){tempDelay();});}function tempDelay (){setTimeout(function(){lo.redo(function(){temopShow();})},2000);}document.addEventListener("DOMContentLoaded",function(){temopShow();},false);document.addEventListener("doubleTap",function(){if(flag) {lo.hide(function(){});} else {temopShow();}flag = !flag;})</script></head><body></body></html>