JS加载层
花了些时间封装了一个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;
})();
转载请附上本文链接！
JS加载层的更多相关文章
- asp.net自定义控件之加载层
知识点:JQuery.Ajax.自定义控件 该文旨在给大家开发自定义控件(结合js)一个思路,一个简单的示例,可能在实际项目中并不会这样做. 先来看看效果: 1.在静态页面里开发好想要的效果 jQue ...
- （转）Arcgis for js加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
- cordova加载层、进度条、文件选择插件
在做cordova项目的时候,感觉应用的响应速度跟原生应用比相差甚远,一个主要问题就是如加载层.进度条等弹出对话框的效率不行.毕竟项目中的这些弹框都是用dom拼成的,dom的渲染效率和原生控件比起来慢 ...
- JS 加载html 在IE7 IE8下 可调试
实际背景 就是都是HTML 公共头部底部 然后中间部分加载不同的HTML文件 有点跟模板引擎一样 jQuery 有个load函数 加载html文件的路径 获取html内容 到中间部分 正常下是不能用 ...
- 解决JS加载速度慢
在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- [f]动态判断js加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...
- 使用js加载器动态加载外部Javascript文件
原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...
- (转)JS加载顺序
原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...
随机推荐
- MongoDB、Redis、elasticSearch、hbase的对比
MongoDB.Redis.elasticSearch.hbase的对比 MongoDB 优点: (1) 最大的特点是表结构灵活可变,字段类型可以随时修改. (2) 插入数据时,不必考虑表结构的限制. ...
- JUC（8）JMM
文章目录 1.JMM 2.volatile 3.单例模式 1.JMM Volatile是java虚拟机提供轻量级的同步机制 1.保证可见性 2.不保证原子性 3.禁止指令重排 什么是JMM java内 ...
- 基于Camera Link和PCIe DMA的多通道视频采集和显示系统
基于Camera Link和PCIe DMA的多通道视频采集和显示系统 在主机端PCIe驱动的控制和调度下,视频采集与显示系统可以同时完成对多个Camera Link接口视频采集以及Camera Li ...
- JUC学习笔记——共享模型之管程
JUC学习笔记--共享模型之管程 在本系列内容中我们会对JUC做一个系统的学习,本片将会介绍JUC的管程部分 我们会分为以下几部分进行介绍: 共享问题 共享问题解决方案 线程安全分析 Monitor ...
- 833——B题题解
题目链接 题目大意: 给一串字符串(只包含0~9),定义一个最优子串的定义:如果该子串同字符种类数大于最最多字符出现数,那么这个子串可以被称为最优子串. 解题思路: 大眼一看这个数据范围他用n^2的算 ...
- Go语言核心36讲52
你好,我是郝林. 专栏到这里,就要结束了. 差不多在半年以前(2018年的第二个季度),极客时间的总编辑郭蕾找到我,说想让我写一个关于Go语言的技术专栏. 我那时候还在轻松筹担任大数据负责人,管理着四 ...
- Java标准类
一个标准的类通常要拥有以下四个组成部分 1.所有的成员变量都要使用private关键字修饰 2.为每一个成员变量编写一对儿Getter/Setter方法 3.编写一个无参数的构造方法 4.编写一个全参 ...
- 基于python的数学建模---传染病六个模型
六个模型的区别 SI-Model import scipy.integrate as spi import numpy as np import matplotlib.pyplot as plt # ...
- UBOOT编译--- UBOOT的顶层config.mk(五)
1. 前言 UBOOT版本:uboot2018.03,开发板myimx8mmek240. 2. 概述 此文件包含在 ./Makefile 和 spl/Makefile 中. 清理状态以避免添加两次相同 ...
- 随笔——安卓手机调试微信网页,x5错误页
如果打开debugx5.qq.com提示您使用的不是x5内核 那么先打开debugmm.qq.com/?forcex5=true 再打开http://debugtbs.qq.com 将进入下面这个页面 ...