CSS Spinner

_.spinner.md

CSS Spinners

loader.js

// loader
const lo=function(){
	var el;
	const id=c_+'loader';
	function hd(){var e=dm.id(id);if(e){dm.remove(e)}}
	function sw(){d.body.appendChild(el);dm.blur()}
	function init(){
		var e=dm.id(id);
		if(e==ud){
			e=dm.create('div');
			e.id=id;
			e.innerHTML='<div class="'+c_+'spinner"><div></div><div class="c1"></div><div class="c2"></div><div class="c3"></div><div class="c4"></div></div>';
		}
		el=e;
	}
	const o={
		h:hd,
		s:sw
	};
	dr(init);
	return o
}();

spin-1.css

.app-spinner {
	display:block;
	opacity:.8;
}

.app-spinner div {
	display:block;
	box-sizing:border-box;
	position:absolute;
	border-style:solid;
	border-color:#ddd transparent transparent transparent;
	border-radius:50%;
	border-width:6px;
	width:16px;
	height:16px;
	opacity:0;
	animation:app-spin 1.4s cubic-bezier(.7,.25,.3,.75) infinite;
}

.app-spinner.-app-spinner-32 div {
	border-width:12px;
	width:32px;
	height:32px;
}

.app-spinner .c1 {
	border-color:#aaa transparent transparent transparent;
	animation-delay:-.57s;
}

.app-spinner .c2 {
	border-color:#bbb transparent transparent transparent;
	animation-delay:-.43s;
}

.app-spinner .c3 {
	border-color:#ccc transparent transparent transparent;
	animation-delay:-.28s;
}

.app-spinner .c4 {
	animation-delay:-.14s;
}

#app-loader {
	z-index:100;
}

#app-loader .app-spinner div {
	border-width:12px;
	width:128px;
	height:128px;
}

#app-loader .app-spinner {
	position:relative;
	top:50%;
	left:50%;
	width:0;
	height:0;
}

#app-loader .app-spinner {
	margin-top:-64px;
	margin-left:-64px;
}

/* animations */

@keyframes app-spin {
	0% {transform:rotate(0deg); opacity:1;}
	100% {transform:rotate(360deg); opacity:1;}
}