纯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>