昨天有个项目要用到加载层，寻思了一下，框架的加载层也就那样，频繁自己写也不是事。
所以花了些时间封装了一个JS类，内置9种图标样式，全局主要样式可自定义。
转载请附上本文链接！
配置项
{
"msg": "文字，默认: “loading...” ",
"show": "是否显示，默认true",
"resize": "是否跟随窗口变化，默认true",
"log": "是否打印控制台教程，默认true",
"id": "DOM元素ID，默认随机id",
"width": "遮罩层宽度(任意css样式写法)",
"height": "遮罩层高度(任意css样式写法)",
"zIndex": "遮罩层层级(int)",
"spacing": "图标与文字的间距(int)，单位px",
"icon": {
"type": "图标类别(int)(1-9)，默认1",
"width": "图标宽度(int)，单位px",
"height": "图标高度(int)，单位px"
},
"color": {
"bg": "背景颜色",
"icon": "图标颜色",
"word": "文字颜色"
}
}
使用示例
// 实例化调用
var lj = new LoadingJs({
msg: "加载中...", // 加载文字
spacing: 20, // 图标文字间距
icon: { // 图标配置
type: 3, // 图标样式3
width: 64, // 图标宽度
height: 64 // 图标宽度
},
color: { // 颜色配置
bg: "#000131", // 背景色
word: "#ffffff", // 加载文字颜色
icon: "#eeeeee" // 图标颜色
}
});
// 实例化对象后的函数和基本属性 begin
// 下列三个函数会改变配置对象的show属性
lj.show(); // 显示 loading 元素
lj.hide(); // 隐藏 loading 元素
lj.remove(); // 移除 loading 元素
lj.config; // 配置信息(JSON)
// 实例化对象后的函数和基本属性 end
源码 - 压缩版
/**
* 作者: 散人
* 版本: V1.5
* 博客: https://www.cnblogs.com/sanrenblog
*/
var LoadingJs=(function(){function _LoadingJs(property){function css_limit(r,d){if(r){Object.keys(d).forEach(function(key){if(r.hasOwnProperty(key)&&r[key]){r[key]=r[key].toString().replace(/[^0-9a-zA-Z\s\(\)\{\}\+\-\.\*\!_,'"%#]/ig,'')}else{r[key]=d[key]}});return r}else{return d}}function css_wh_set(p,w,h){p.width=p.width?parseInt(p.width):w;p.height=p.height?parseInt(p.height):h;return p}if(this instanceof _LoadingJs){const version='1.5';const css_wh_not_auto=[4,8];property=property?property:{};property.id=property.id?property.id:'loadingjs-div-'+new Date().getTime()+'-'+Math.random().toString().replace(/[0-9]?\./,''),property.msg=property.msg||property.msg===''?property.msg:'loading...';property.show=property.show===false?false:true;property.resize=property.resize===false?false:true;property.width=property.width?property.width.toString().replace(/[^0-9a-zA-Z\+\-\s\(\)\%\!]/g,''):'100%';property.height=property.height?property.height.toString().replace(/[^0-9a-zA-Z\+\-\s\(\)\%\!]/g,''):'100%';property.zIndex=property.zIndex?parseInt(property.zIndex):2147483647;property.spacing=property.spacing?parseInt(property.spacing):0;property.icon=property.icon?property.icon:{type:1};if(!css_wh_not_auto.includes(property.icon.type)){property.icon=css_wh_set(property.icon,64,64)}property.color=css_limit(property.color,{bg:'#ffffff',icon:'#333333',word:'#000000'});let div_str='',style_str='',style_sign='loadingjs-tag-style-icon-'+property.icon.type;switch(property.icon.type){case 1:div_str='<div id="'+property.id+'" class="loadingjs-tag-div"><div class="loadingjs-sk-1-folding-cube"><div class="loadingjs-sk-1-cube1 loadingjs-sk-1-cube"></div><div class="loadingjs-sk-1-cube2 loadingjs-sk-1-cube"></div><div class="loadingjs-sk-1-cube4 loadingjs-sk-1-cube"></div><div class="loadingjs-sk-1-cube3 loadingjs-sk-1-cube"></div></div><p>'+property.msg+'</p></div>';style_str='<style class="'+style_sign+'">.loadingjs-tag-div{width:'+property.width+';height:'+property.height+';position:fixed;top:0;left:0;z-index:'+property.zIndex+';background-color:'+property.color.bg+'}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:'+property.color.word+'}.loadingjs-sk-1-folding-cube{width:'+property.icon.width+'px;height:'+property.icon.height+'px;position:absolute;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube{width:50%;height:50%;float:left;position:relative;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube:before{width:100%;height:100%;position:absolute;top:0;left:0;content:"";background-color:'+property.color.icon+';-webkit-animation:loadingjs-sk-1-foldCubeAngle 2.4s infinite linear both;animation:loadingjs-sk-1-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube2:before{-webkit-animation-delay:0.3s;animation-delay:0.3s}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube3:before{-webkit-animation-delay:0.6s;animation-delay:0.6s}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube4:before{-webkit-animation-delay:0.9s;animation-delay:0.9s}@-webkit-keyframes loadingjs-sk-1-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes loadingjs-sk-1-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}</style>';break;case 2:div_str='<div id="'+property.id+'" class="loadingjs-tag-div"><div class="loadingjs-sk-2-spinner"><div class="loadingjs-sk-2-bounce1"></div><div class="loadingjs-sk-2-bounce2"></div></div><p>'+property.msg+'</p></div>';style_str='<style class="'+style_sign+'">.loadingjs-tag-div{width:'+property.width+';height:'+property.height+';position:fixed;top:0;left:0;z-index:'+property.zIndex+';background-color:'+property.color.bg+'}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:'+property.color.word+'}.loadingjs-sk-2-spinner{width:'+property.icon.width+'px;height:'+property.icon.height+'px;position:relative}.loadingjs-sk-2-bounce1,.loadingjs-sk-2-bounce2{width:100%;height:100%;border-radius:50%;background-color:'+property.color.icon+';opacity:0.6;position:absolute;top:0;left:0;-webkit-animation:loadingjs-sk-2-bounce 2.0s infinite ease-in-out;animation:loadingjs-sk-2-bounce 2.0s infinite ease-in-out}.loadingjs-sk-2-bounce2{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}@-webkit-keyframes loadingjs-sk-2-bounce{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframes loadingjs-sk-2-bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}50%{transform:scale(1.0);-webkit-transform:scale(1.0)}}</style>';break;case 3:div_str='<div id="'+property.id+'" class="loadingjs-tag-div"><div class="loadingjs-sk-3-cube-grid"><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube1"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube2"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube3"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube4"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube5"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube6"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube7"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube8"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube9"></div></div><p>'+property.msg+'</p></div>';style_str='<style class="'+style_sign+'">.loadingjs-tag-div{width:'+property.width+';height:'+property.height+';position:fixed;top:0;left:0;z-index:'+property.zIndex+';background-color:'+property.color.bg+'}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:'+property.color.word+'}.loadingjs-sk-3-cube-grid{width:'+property.icon.width+'px;height:'+property.icon.height+'px;position:relative}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube{width:33%;height:33%;background-color:'+property.color.icon+';float:left;-webkit-animation:loadingjs-sk-3-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:loadingjs-sk-3-cubeGridScaleDelay 1.3s infinite ease-in-out}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube1{-webkit-animation-delay:0.2s;animation-delay:0.2s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube2{-webkit-animation-delay:0.3s;animation-delay:0.3s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube3{-webkit-animation-delay:0.4s;animation-delay:0.4s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube4{-webkit-animation-delay:0.1s;animation-delay:0.1s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube5{-webkit-animation-delay:0.2s;animation-delay:0.2s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube6{-webkit-animation-delay:0.3s;animation-delay:0.3s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube7{-webkit-animation-delay:0s;animation-delay:0s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube8{-webkit-animation-delay:0.1s;animation-delay:0.1s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube9{-webkit-animation-delay:0.2s;animation-delay:0.2s}@-webkit-keyframes loadingjs-sk-3-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes loadingjs-sk-3-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}</style>';break;case 4:property.icon=css_wh_set(property.icon,108,78);div_str='<div id="'+property.id+'" class="loadingjs-tag-div"><div class="loadingjs-sk-4-spinner"><div class="loadingjs-sk-4-rect1"></div><div class="loadingjs-sk-4-rect2"></div><div class="loadingjs-sk-4-rect3"></div><div class="loadingjs-sk-4-rect4"></div><div class="loadingjs-sk-4-rect5"></div><div class="loadingjs-sk-4-rect6"></div><div class="loadingjs-sk-4-rect7"></div><div class="loadingjs-sk-4-rect8"></div></div><p>'+property.msg+'</p></div>';style_str='<style class="'+style_sign+'">.loadingjs-tag-div{width:'+property.width+';height:'+property.height+';position:fixed;top:0;left:0;z-index:'+property.zIndex+';background-color:'+property.color.bg+'}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:'+property.color.word+'}.loadingjs-sk-4-spinner{width:'+property.icon.width+'px;height:'+property.icon.height+'px;position:relative;text-align:center}.loadingjs-sk-4-spinner>div{background-color:'+property.color.icon+';height:100%;width:8%;display:inline-block;margin-right:1px;-webkit-animation:loadingjs-sk-4-stretchdelay 1.6s infinite ease-in-out;animation:loadingjs-sk-4-stretchdelay 1.6s infinite ease-in-out}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect2{-webkit-animation-delay:-1.5s;animation-delay:-1.5s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect3{-webkit-animation-delay:-1.4s;animation-delay:-1.4s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect4{-webkit-animation-delay:-1.3s;animation-delay:-1.3s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect5{-webkit-animation-delay:-1.2s;animation-delay:-1.2s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect6{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect7{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect8{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes loadingjs-sk-4-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}@keyframes loadingjs-sk-4-stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}</style>';break;case 5:div_str='<div id="'+property.id+'" class="loadingjs-tag-div"><div class="loadingjs-sk-5-spinner"><div class="loadingjs-sk-5-dot1"></div><div class="loadingjs-sk-5-dot2"></div></div><p>'+property.msg+'</p></div>';style_str='<style class="'+style_sign+'">.loadingjs-tag-div{width:'+property.width+';height:'+property.height+';position:fixed;top:0;left:0;z-index:'+property.zIndex+';background-color:'+property.color.bg+'}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:'+property.color.word+'}.loadingjs-sk-5-spinner{width:'+property.icon.width+'px;height:'+property.icon.height+'px;position:relative;text-align:center;-webkit-animation:loadingjs-sk-5-rotate 2.0s infinite linear;animation:loadingjs-sk-5-rotate 2.0s infinite linear}.loadingjs-sk-5-dot1,.loadingjs-sk-5-dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:'+property.color.icon+';border-radius:100%;-webkit-animation:loadingjs-sk-5-bounce 2.0s infinite ease-in-out;animation:loadingjs-sk-5-bounce 2.0s infinite ease-in-out}.loadingjs-sk-5-dot2{top:auto;bottom:0;-webkit-animation-delay:-1.0s;animation-delay:-1.0s}@-webkit-keyframes loadingjs-sk-5-rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes loadingjs-sk-5-rotate{100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes loadingjs-sk-5-bounce{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframes loadingjs-sk-5-bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}50%{transform:scale(1.0);-webkit-transform:scale(1.0)}}</style>';break;case 6:div_str='<div id="'+property.id+'" class="loadingjs-tag-div"><div class="loadingjs-sk-6-chase"><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div></div><p>'+property.msg+'</p></div>';style_str='<style class="'+style_sign+'">.loadingjs-tag-div{width:'+property.width+';height:'+property.height+';position:fixed;top:0;left:0;z-index:'+property.zIndex+';background-color:'+property.color.bg+'}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:'+property.color.word+'}.loadingjs-sk-6-chase{width:'+property.icon.width+'px;height:'+property.icon.height+'px;position:relative;animation:loadingjs-sk-6-chase 2.5s infinite linear both}.loadingjs-sk-6-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:loadingjs-sk-6-chase-dot 2.0s infinite ease-in-out both}.loadingjs-sk-6-chase-dot:before{content:"";display:block;width:25%;height:25%;background-color:#fff;border-radius:100%;animation:loadingjs-sk-6-chase-dot-before 2.0s infinite ease-in-out both}.loadingjs-sk-6-chase-dot:nth-child(1){animation-delay:-1.1s}.loadingjs-sk-6-chase-dot:nth-child(2){animation-delay:-1.0s}.loadingjs-sk-6-chase-dot:nth-child(3){animation-delay:-0.9s}.loadingjs-sk-6-chase-dot:nth-child(4){animation-delay:-0.8s}.loadingjs-sk-6-chase-dot:nth-child(5){animation-delay:-0.7s}.loadingjs-sk-6-chase-dot:nth-child(6){animation-delay:-0.6s}.loadingjs-sk-6-chase-dot:nth-child(1):before{animation-delay:-1.1s}.loadingjs-sk-6-chase-dot:nth-child(2):before{animation-delay:-1.0s}.loadingjs-sk-6-chase-dot:nth-child(3):before{animation-delay:-0.9s}.loadingjs-sk-6-chase-dot:nth-child(4):before{animation-delay:-0.8s}.loadingjs-sk-6-chase-dot:nth-child(5):before{animation-delay:-0.7s}.loadingjs-sk-6-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes loadingjs-sk-6-chase{100%{transform:rotate(360deg)}}@keyframes loadingjs-sk-6-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes loadingjs-sk-6-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}}</style>';break;case 7:div_str='<div id="'+property.id+'" class="loadingjs-tag-div"><div class="loadingjs-sk-7-spinner"></div><p>'+property.msg+'</p></div>';style_str='<style class="'+style_sign+'">.loadingjs-tag-div{width:'+property.width+';height:'+property.height+';position:fixed;top:0;left:0;z-index:'+property.zIndex+';background-color:'+property.color.bg+'}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:'+property.color.word+'}.loadingjs-sk-7-spinner{width:'+property.icon.width+'px;height:'+property.icon.height+'px;position:relative;background-color:'+property.color.icon+';-webkit-animation:loadingjs-sk-7-rotateplane 1.2s infinite ease-in-out;animation:loadingjs-sk-7-rotateplane 1.2s infinite ease-in-out}@-webkit-keyframes loadingjs-sk-7-rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes loadingjs-sk-7-rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}</style>';break;case 8:property.icon=css_wh_set(property.icon,18,18);div_str='<div id="'+property.id+'" class="loadingjs-tag-div"><div class="loadingjs-sk-8-spinner"><div class="loadingjs-sk-8-bounce1"></div><div class="loadingjs-sk-8-bounce2"></div><div class="loadingjs-sk-8-bounce3"></div></div><p>'+property.msg+'</p></div>';style_str='<style class="'+style_sign+'">.loadingjs-tag-div{width:'+property.width+';height:'+property.height+';position:fixed;top:0;left:0;z-index:'+property.zIndex+';background-color:'+property.color.bg+'}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:'+property.color.word+'}.loadingjs-sk-8-spinner{width:100%;position:relative;text-align:center}.loadingjs-sk-8-spinner>div{width:'+property.icon.width+'px;height:'+property.icon.height+'px;margin-left:8px;background-color:'+property.color.icon+';border-radius:100%;display:inline-block;-webkit-animation:sk-loadingjs-sk-8-bouncedelay 1.4s infinite ease-in-out both;animation:sk-loadingjs-sk-8-bouncedelay 1.4s infinite ease-in-out both}.loadingjs-sk-8-spinner .loadingjs-sk-8-bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.loadingjs-sk-8-spinner .loadingjs-sk-8-bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}@-webkit-keyframes sk-loadingjs-sk-8-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1.0)}}@keyframes sk-loadingjs-sk-8-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1.0);transform:scale(1.0)}}</style>';break;case 9:div_str='<div id="'+property.id+'" class="loadingjs-tag-div"><div class="loadingjs-sk-9-circle"><div class="loadingjs-sk-9-circle1 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle2 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle3 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle4 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle5 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle6 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle7 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle8 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle9 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle10 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle11 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle12 loadingjs-sk-9-child"></div></div><p>'+property.msg+'</p></div>';style_str='<style class="'+style_sign+'">.loadingjs-tag-div{width:'+property.width+';height:'+property.height+';position:fixed;top:0;left:0;z-index:'+property.zIndex+';background-color:'+property.color.bg+'}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:'+property.color.word+'}.loadingjs-sk-9-circle{width:'+property.icon.width+'px;height:'+property.icon.height+'px;position:relative}.loadingjs-sk-9-circle .loadingjs-sk-9-child{width:100%;height:100%;position:absolute;left:0;top:0}.loadingjs-sk-9-circle .loadingjs-sk-9-child:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:'+property.color.icon+';border-radius:100%;-webkit-animation:loadingjs-sk-9-circleBounceDelay 1.2s infinite ease-in-out both;animation:loadingjs-sk-9-circleBounceDelay 1.2s infinite ease-in-out both}.loadingjs-sk-9-circle .loadingjs-sk-9-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle4:before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle5:before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle6:before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle7:before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle8:before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle9:before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle10:before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle11:before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle12:before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes loadingjs-sk-9-circleBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes loadingjs-sk-9-circleBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}</style>';break}if(property.log!==false){console.log('欢迎使用 loading-js\n\n作者: 散人\n版本: V'+version+'\n博客: https://www.cnblogs.com/sanrenblog\n\n[配置简述]\n=============== begin ===============\n{\n "msg": "文字，默认: “loading...” ",\n "show": "是否显示，默认true",\n "resize": "是否跟随窗口变化，默认true",\n "log": "是否打印控制台教程，默认true",\n\n "id": "DOM元素ID，默认随机id",\n "width": "遮罩层宽度(任意css样式写法)",\n "height": "遮罩层高度(任意css样式写法)",\n "zIndex": "遮罩层层级(int)",\n "spacing": "图标与文字的间距(int)，单位px",\n\n "icon": {\n "type": "图标类别(int)(1-9)，默认1",\n "width": "图标宽度(int)，单位px",\n "height": "图标高度(int)，单位px"\n },\n\n "color": {\n "bg": "背景颜色",\n "icon": "图标颜色",\n "word": "文字颜色"\n }\n}\n=============== end ===============\n\n[API简述]\n=============== begin ===============\n1. show(): 创建/显示 loading 元素\n2. hide(): 隐藏 loading 元素\n3. remove(): 移除 loading 元素\n\n4. config: 配置信息(JSON)\n=============== end ===============\n\n[实例化-示例]\n=============== begin ===============\nvar lj = new LoadingJs({\n msg: "加载中...", // 加载文字\n spacing: 20, // 图标文字间距\n icon: { // 图标配置\n type: 3,\n width: 64,\n height: 64\n },\n color: { // 颜色配置\n bg: "#000131",\n word: "#ffffff",\n icon: "#eeeeee"\n }\n});\n=============== end ===============\n\n祝您使用愉快 (๑*◡*๑)')}function setWH(){let d=document.getElementById(property.id),ld=document.querySelector('#'+property.id+'>div'),ldp=document.querySelector('#'+property.id+'>p');let windowW=d.offsetWidth,windowH=d.offsetHeight,ldW=ld.offsetWidth,ldH=ld.offsetHeight,ldpW=ldp.offsetWidth;ldW=ldW?ldW:property.icon.width;ldH=ldH?ldH:property.icon.height;ldpW=ldpW?ldpW:ldW;ld.style['left']=((windowW-ldW)/2)+'px';ld.style['top']=(((windowH-ldH)/2)-(ldH/2))+'px';ldp.style['left']=((windowW-ldpW)/2)+'px';ldp.style['top']=(((windowH-ldH)/2)+ldH)+'px';ldp.style['margin-top']=property.spacing+'px'}this.show=function(){let d=document.getElementById(property.id);if(d){d.style.display='block'}else{document.querySelector('body').insertAdjacentHTML('beforeend',div_str);if(property.resize){window.addEventListener('resize',setWH)}}setWH();this.config.show=true};this.hide=function(){let d=document.getElementById(property.id);if(d){d.style.display='none'}this.config.show=false};this.remove=function(){let d=document.getElementById(property.id);if(d){try{d.parentNode.removeChild(d)}catch(e){d.remove()}}window.removeEventListener('resize',setWH);this.config.show=false};this.config=property;if(!document.querySelector('.'+style_sign)){document.querySelector('body').insertAdjacentHTML('beforeend',style_str)}if(property.show){this.show()}}else{}}return _LoadingJs})();
源码 - 开发版
var LoadingJs = (function() {
/**
* 构造函数
* @param {Object} property
*/
function _LoadingJs(property) {
/**
* css过滤
* @param {Object} r 源数据
* @param {Object} d 默认数据
*/
function css_limit(r, d) {
if (r) {
Object.keys(d).forEach(function(key) { // 遍历完整key
if (r.hasOwnProperty(key) && r[key]) { // 传入节点是否存在
r[key] = r[key].toString().replace(/[^0-9a-zA-Z\s\(\)\{\}\+\-\.\*\!_,'"%#]/ig, '')
} else {
r[key] = d[key];
}
});
return r;
} else {
return d;
}
}
/**
* 宽高属性设置
* @param {Object} p
* @param {Object} w
* @param {Object} h
*/
function css_wh_set(p, w, h) {
p.width = p.width ? parseInt(p.width) : w; // 宽度
p.height = p.height ? parseInt(p.height) : h; // 高度
return p
}
if (this instanceof _LoadingJs) {
const version = '1.5'; // js版本
const css_wh_not_auto = [4, 8]; // 元素宽高不使用统一配置
property = property ? property : {};
property.id = property.id ? property.id : 'loadingjs-div-' + new Date().getTime() + '-' + Math.random().toString().replace(/[0-9]?\./, ''), // 盒子id
property.msg = property.msg || property.msg === '' ? property.msg : 'loading...'; // 显示文字
property.show = property.show === false ? false : true; // 默认显示
property.resize = property.resize === false ? false : true; // 跟随窗口变化
property.width = property.width ? property.width.toString().replace(/[^0-9a-zA-Z\+\-\s\(\)\%\!]/g, '') : '100%'; // 遮罩层宽度
property.height = property.height ? property.height.toString().replace(/[^0-9a-zA-Z\+\-\s\(\)\%\!]/g, '') : '100%'; // 遮罩层高度
property.zIndex = property.zIndex ? parseInt(property.zIndex) : 2147483647; // 遮罩层层级
property.spacing = property.spacing ? parseInt(property.spacing) : 0; // 图标与文字的间距
property.icon = property.icon ? property.icon : {type: 1}; // 图标配置
// 遮罩层宽高设置
if (!css_wh_not_auto.includes(property.icon.type)) {
property.icon = css_wh_set(property.icon, 64, 64);
}
// css样式过滤
property.color = css_limit(property.color, {
bg: '#ffffff',
icon: '#333333',
word: '#000000'
});
let div_str = '', style_str = '', style_sign = 'loadingjs-tag-style-icon-' + property.icon.type;
switch (property.icon.type) {
case 1:
div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><div class="loadingjs-sk-1-folding-cube"><div class="loadingjs-sk-1-cube1 loadingjs-sk-1-cube"></div><div class="loadingjs-sk-1-cube2 loadingjs-sk-1-cube"></div><div class="loadingjs-sk-1-cube4 loadingjs-sk-1-cube"></div><div class="loadingjs-sk-1-cube3 loadingjs-sk-1-cube"></div></div><p>' + property.msg + '</p></div>';
style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:fixed;top:0;left:0;z-index:' + property.zIndex + ';background-color:' + property.color.bg + '}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:' + property.color.word + '}.loadingjs-sk-1-folding-cube{width:' + property.icon.width + 'px;height:' + property.icon.height + 'px;position:absolute;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube{width:50%;height:50%;float:left;position:relative;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube:before{width:100%;height:100%;position:absolute;top:0;left:0;content:"";background-color:' + property.color.icon + ';-webkit-animation:loadingjs-sk-1-foldCubeAngle 2.4s infinite linear both;animation:loadingjs-sk-1-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube2:before{-webkit-animation-delay:0.3s;animation-delay:0.3s}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube3:before{-webkit-animation-delay:0.6s;animation-delay:0.6s}.loadingjs-sk-1-folding-cube .loadingjs-sk-1-cube4:before{-webkit-animation-delay:0.9s;animation-delay:0.9s}@-webkit-keyframes loadingjs-sk-1-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes loadingjs-sk-1-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}</style>';
break;
case 2:
div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><div class="loadingjs-sk-2-spinner"><div class="loadingjs-sk-2-bounce1"></div><div class="loadingjs-sk-2-bounce2"></div></div><p>' + property.msg + '</p></div>';
style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:fixed;top:0;left:0;z-index:' + property.zIndex + ';background-color:' + property.color.bg + '}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:' + property.color.word + '}.loadingjs-sk-2-spinner{width:' + property.icon.width + 'px;height:' + property.icon.height + 'px;position:relative}.loadingjs-sk-2-bounce1,.loadingjs-sk-2-bounce2{width:100%;height:100%;border-radius:50%;background-color:' + property.color.icon + ';opacity:0.6;position:absolute;top:0;left:0;-webkit-animation:loadingjs-sk-2-bounce 2.0s infinite ease-in-out;animation:loadingjs-sk-2-bounce 2.0s infinite ease-in-out}.loadingjs-sk-2-bounce2{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}@-webkit-keyframes loadingjs-sk-2-bounce{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframes loadingjs-sk-2-bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}50%{transform:scale(1.0);-webkit-transform:scale(1.0)}}</style>';
break;
case 3:
div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><div class="loadingjs-sk-3-cube-grid"><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube1"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube2"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube3"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube4"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube5"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube6"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube7"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube8"></div><div class="loadingjs-sk-3-cube loadingjs-sk-3-cube9"></div></div><p>' + property.msg + '</p></div>';
style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:fixed;top:0;left:0;z-index:' + property.zIndex + ';background-color:' + property.color.bg + '}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:' + property.color.word + '}.loadingjs-sk-3-cube-grid{width:' + property.icon.width + 'px;height:' + property.icon.height + 'px;position:relative}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube{width:33%;height:33%;background-color:' + property.color.icon + ';float:left;-webkit-animation:loadingjs-sk-3-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:loadingjs-sk-3-cubeGridScaleDelay 1.3s infinite ease-in-out}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube1{-webkit-animation-delay:0.2s;animation-delay:0.2s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube2{-webkit-animation-delay:0.3s;animation-delay:0.3s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube3{-webkit-animation-delay:0.4s;animation-delay:0.4s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube4{-webkit-animation-delay:0.1s;animation-delay:0.1s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube5{-webkit-animation-delay:0.2s;animation-delay:0.2s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube6{-webkit-animation-delay:0.3s;animation-delay:0.3s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube7{-webkit-animation-delay:0s;animation-delay:0s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube8{-webkit-animation-delay:0.1s;animation-delay:0.1s}.loadingjs-sk-3-cube-grid .loadingjs-sk-3-cube9{-webkit-animation-delay:0.2s;animation-delay:0.2s}@-webkit-keyframes loadingjs-sk-3-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes loadingjs-sk-3-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}</style>';
break;
case 4:
property.icon = css_wh_set(property.icon, 108, 78);
div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><div class="loadingjs-sk-4-spinner"><div class="loadingjs-sk-4-rect1"></div><div class="loadingjs-sk-4-rect2"></div><div class="loadingjs-sk-4-rect3"></div><div class="loadingjs-sk-4-rect4"></div><div class="loadingjs-sk-4-rect5"></div><div class="loadingjs-sk-4-rect6"></div><div class="loadingjs-sk-4-rect7"></div><div class="loadingjs-sk-4-rect8"></div></div><p>' + property.msg + '</p></div>';
style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:fixed;top:0;left:0;z-index:' + property.zIndex + ';background-color:' + property.color.bg + '}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:' + property.color.word + '}.loadingjs-sk-4-spinner{width:' + property.icon.width + 'px;height:' + property.icon.height + 'px;position:relative;text-align:center}.loadingjs-sk-4-spinner>div{background-color:' + property.color.icon + ';height:100%;width:8%;display:inline-block;margin-right:1px;-webkit-animation:loadingjs-sk-4-stretchdelay 1.6s infinite ease-in-out;animation:loadingjs-sk-4-stretchdelay 1.6s infinite ease-in-out}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect2{-webkit-animation-delay:-1.5s;animation-delay:-1.5s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect3{-webkit-animation-delay:-1.4s;animation-delay:-1.4s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect4{-webkit-animation-delay:-1.3s;animation-delay:-1.3s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect5{-webkit-animation-delay:-1.2s;animation-delay:-1.2s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect6{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect7{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.loadingjs-sk-4-spinner .loadingjs-sk-4-rect8{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes loadingjs-sk-4-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}@keyframes loadingjs-sk-4-stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}</style>';
break;
case 5:
div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><div class="loadingjs-sk-5-spinner"><div class="loadingjs-sk-5-dot1"></div><div class="loadingjs-sk-5-dot2"></div></div><p>' + property.msg + '</p></div>';
style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:fixed;top:0;left:0;z-index:' + property.zIndex + ';background-color:' + property.color.bg + '}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:' + property.color.word + '}.loadingjs-sk-5-spinner{width:' + property.icon.width + 'px;height:' + property.icon.height + 'px;position:relative;text-align:center;-webkit-animation:loadingjs-sk-5-rotate 2.0s infinite linear;animation:loadingjs-sk-5-rotate 2.0s infinite linear}.loadingjs-sk-5-dot1,.loadingjs-sk-5-dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:' + property.color.icon + ';border-radius:100%;-webkit-animation:loadingjs-sk-5-bounce 2.0s infinite ease-in-out;animation:loadingjs-sk-5-bounce 2.0s infinite ease-in-out}.loadingjs-sk-5-dot2{top:auto;bottom:0;-webkit-animation-delay:-1.0s;animation-delay:-1.0s}@-webkit-keyframes loadingjs-sk-5-rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes loadingjs-sk-5-rotate{100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes loadingjs-sk-5-bounce{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframes loadingjs-sk-5-bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}50%{transform:scale(1.0);-webkit-transform:scale(1.0)}}</style>';
break;
case 6:
div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><div class="loadingjs-sk-6-chase"><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div><div class="loadingjs-sk-6-chase-dot"></div></div><p>' + property.msg + '</p></div>';
style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:fixed;top:0;left:0;z-index:' + property.zIndex + ';background-color:' + property.color.bg + '}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:' + property.color.word + '}.loadingjs-sk-6-chase{width:' + property.icon.width + 'px;height:' + property.icon.height + 'px;position:relative;animation:loadingjs-sk-6-chase 2.5s infinite linear both}.loadingjs-sk-6-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:loadingjs-sk-6-chase-dot 2.0s infinite ease-in-out both}.loadingjs-sk-6-chase-dot:before{content:"";display:block;width:25%;height:25%;background-color:#fff;border-radius:100%;animation:loadingjs-sk-6-chase-dot-before 2.0s infinite ease-in-out both}.loadingjs-sk-6-chase-dot:nth-child(1){animation-delay:-1.1s}.loadingjs-sk-6-chase-dot:nth-child(2){animation-delay:-1.0s}.loadingjs-sk-6-chase-dot:nth-child(3){animation-delay:-0.9s}.loadingjs-sk-6-chase-dot:nth-child(4){animation-delay:-0.8s}.loadingjs-sk-6-chase-dot:nth-child(5){animation-delay:-0.7s}.loadingjs-sk-6-chase-dot:nth-child(6){animation-delay:-0.6s}.loadingjs-sk-6-chase-dot:nth-child(1):before{animation-delay:-1.1s}.loadingjs-sk-6-chase-dot:nth-child(2):before{animation-delay:-1.0s}.loadingjs-sk-6-chase-dot:nth-child(3):before{animation-delay:-0.9s}.loadingjs-sk-6-chase-dot:nth-child(4):before{animation-delay:-0.8s}.loadingjs-sk-6-chase-dot:nth-child(5):before{animation-delay:-0.7s}.loadingjs-sk-6-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes loadingjs-sk-6-chase{100%{transform:rotate(360deg)}}@keyframes loadingjs-sk-6-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes loadingjs-sk-6-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}}</style>';
break;
case 7:
div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><div class="loadingjs-sk-7-spinner"></div><p>' + property.msg + '</p></div>';
style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:fixed;top:0;left:0;z-index:' + property.zIndex + ';background-color:' + property.color.bg + '}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:' + property.color.word + '}.loadingjs-sk-7-spinner{width:' + property.icon.width + 'px;height:' + property.icon.height + 'px;position:relative;background-color:' + property.color.icon + ';-webkit-animation:loadingjs-sk-7-rotateplane 1.2s infinite ease-in-out;animation:loadingjs-sk-7-rotateplane 1.2s infinite ease-in-out}@-webkit-keyframes loadingjs-sk-7-rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes loadingjs-sk-7-rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}</style>';
break;
case 8:
property.icon = css_wh_set(property.icon, 18, 18);
div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><div class="loadingjs-sk-8-spinner"><div class="loadingjs-sk-8-bounce1"></div><div class="loadingjs-sk-8-bounce2"></div><div class="loadingjs-sk-8-bounce3"></div></div><p>' + property.msg + '</p></div>';
style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:fixed;top:0;left:0;z-index:' + property.zIndex + ';background-color:' + property.color.bg + '}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:' + property.color.word + '}.loadingjs-sk-8-spinner{width:100%;position:relative;text-align:center}.loadingjs-sk-8-spinner>div{width:' + property.icon.width + 'px;height:' + property.icon.height + 'px;margin-left:8px;background-color:' + property.color.icon + ';border-radius:100%;display:inline-block;-webkit-animation:sk-loadingjs-sk-8-bouncedelay 1.4s infinite ease-in-out both;animation:sk-loadingjs-sk-8-bouncedelay 1.4s infinite ease-in-out both}.loadingjs-sk-8-spinner .loadingjs-sk-8-bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.loadingjs-sk-8-spinner .loadingjs-sk-8-bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}@-webkit-keyframes sk-loadingjs-sk-8-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1.0)}}@keyframes sk-loadingjs-sk-8-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1.0);transform:scale(1.0)}}</style>';
break;
case 9:
div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><div class="loadingjs-sk-9-circle"><div class="loadingjs-sk-9-circle1 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle2 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle3 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle4 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle5 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle6 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle7 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle8 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle9 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle10 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle11 loadingjs-sk-9-child"></div><div class="loadingjs-sk-9-circle12 loadingjs-sk-9-child"></div></div><p>' + property.msg + '</p></div>';
style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:fixed;top:0;left:0;z-index:' + property.zIndex + ';background-color:' + property.color.bg + '}.loadingjs-tag-div>p{margin:0;position:absolute;text-align:center;font-size:18px;color:' + property.color.word + '}.loadingjs-sk-9-circle{width:' + property.icon.width + 'px;height:' + property.icon.height + 'px;position:relative}.loadingjs-sk-9-circle .loadingjs-sk-9-child{width:100%;height:100%;position:absolute;left:0;top:0}.loadingjs-sk-9-circle .loadingjs-sk-9-child:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:' + property.color.icon + ';border-radius:100%;-webkit-animation:loadingjs-sk-9-circleBounceDelay 1.2s infinite ease-in-out both;animation:loadingjs-sk-9-circleBounceDelay 1.2s infinite ease-in-out both}.loadingjs-sk-9-circle .loadingjs-sk-9-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.loadingjs-sk-9-circle .loadingjs-sk-9-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle4:before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle5:before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle6:before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle7:before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle8:before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle9:before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle10:before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle11:before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.loadingjs-sk-9-circle .loadingjs-sk-9-circle12:before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes loadingjs-sk-9-circleBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes loadingjs-sk-9-circleBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}</style>';
break;
}
if (property.log !== false) {
console.log('欢迎使用 loading-js\n\n' +
'作者: 散人\n' +
'版本: V' + version + '\n' +
'博客: https://www.cnblogs.com/sanrenblog\n\n' +
'[配置简述]\n' +
'=============== begin ===============\n' +
'{\n' +
' "msg": "文字，默认: “loading...” ",\n' +
' "show": "是否显示，默认true",\n' +
' "resize": "是否跟随窗口变化，默认true",\n' +
' "log": "是否打印控制台教程，默认true",\n\n' +
' "id": "DOM元素ID，默认随机id",\n' +
' "width": "遮罩层宽度(任意css样式写法)",\n' +
' "height": "遮罩层高度(任意css样式写法)",\n' +
' "zIndex": "遮罩层层级(int)",\n' +
' "spacing": "图标与文字的间距(int)，单位px",\n\n' +
' "icon": {\n' +
' "type": "图标类别(int)(1-9)，默认1",\n' +
' "width": "图标宽度(int)，单位px",\n' +
' "height": "图标高度(int)，单位px"\n' +
' },\n\n' +
' "color": {\n' +
' "bg": "背景颜色",\n' +
' "icon": "图标颜色",\n' +
' "word": "文字颜色"\n' +
' }\n' +
'}\n' +
'=============== end ===============\n\n' +
'[API简述]\n' +
'=============== begin ===============\n' +
'1. show(): 创建/显示 loading 元素\n' +
'2. hide(): 隐藏 loading 元素\n' +
'3. remove(): 移除 loading 元素\n\n' +
'4. config: 配置信息(JSON)\n' +
'=============== end ===============\n\n' +
'[实例化-示例]\n' +
'=============== begin ===============\n' +
'var lj = new LoadingJs({\n' +
' msg: "加载中...", // 加载文字\n' +
' spacing: 20, // 图标文字间距\n' +
' icon: { // 图标配置\n' +
' type: 3,\n' +
' width: 64,\n' +
' height: 64\n' +
' },\n' +
' color: { // 颜色配置\n' +
' bg: "#000131",\n' +
' word: "#ffffff",\n' +
' icon: "#eeeeee"\n' +
' }\n' +
'});\n' +
'=============== end ===============\n\n' +
'祝您使用愉快 (๑*◡*๑)');
}
// 元素定位
function setWH() {
let d = document.getElementById(property.id),
ld = document.querySelector('#' + property.id + '>div'),
ldp = document.querySelector('#' + property.id + '>p');
let windowW = d.offsetWidth,
windowH = d.offsetHeight,
ldW = ld.offsetWidth,
ldH = ld.offsetHeight,
ldpW = ldp.offsetWidth;
ldW = ldW ? ldW : property.icon.width;
ldH = ldH ? ldH : property.icon.height;
ldpW = ldpW ? ldpW : ldW;
ld.style['left'] = ((windowW - ldW) / 2) + 'px';
ld.style['top'] = (((windowH - ldH) / 2) - (ldH / 2)) +'px';
ldp.style['left'] = ((windowW - ldpW) / 2) + 'px';
ldp.style['top'] = (((windowH - ldH) / 2) + ldH) +'px';
ldp.style['margin-top'] = property.spacing + 'px';
}
// 显示函数
this.show = function() {
let d = document.getElementById(property.id);
if (d) {
d.style.display = 'block';
} else {
document.querySelector('body').insertAdjacentHTML('beforeend', div_str);
// 窗口监听
if (property.resize) {
window.addEventListener('resize', setWH);
}
}
setWH(); // 元素定位
this.config.show = true;
};
// 隐藏函数
this.hide = function() {
let d = document.getElementById(property.id);
if (d) {
d.style.display = 'none';
}
this.config.show = false;
};
// 移除函数
this.remove = function() {
let d = document.getElementById(property.id);
if (d) {
try {
d.parentNode.removeChild(d);
} catch(e) {
d.remove();
}
}
window.removeEventListener('resize', setWH);
this.config.show = false;
};
// 配置对象
this.config = property;
// style盒子
if (!document.querySelector('.' + style_sign)) {
document.querySelector('body').insertAdjacentHTML('beforeend', style_str);
}
// 显示
if (property.show) {
this.show();
}
} else {
// 不需要 new 关键字(自动new)
// return new _LoadingJs(property);
}
}
return _LoadingJs;
})();
转载请附上本文链接！
标签：loadingjs,transform,JS,sk,animation,webkit,property,加载 From： https://www.cnblogs.com/sanrenblog/p/17037149.html