JS实现加载层
昨天有个项目要用到加载层，寻思了一下，框架的加载层也就那样，频繁自己写也不是事。
所以花了些时间封装了一个JS类，内置9种图标样式，全局主要样式可自定义。
纯原生 JS，兼容好，体积小，速度快。
转载请附上本文链接！
配置项
{ "msg": "文字，默认: “loading...” ", "show": "是否显示，默认true", "resize": "是否跟随窗口变化，默认true", "log": "是否打印控制台教程，默认true", "id": "DOM元素ID，默认随机id，可通过实例对象的config属性获取，其它属性同理", "width": "遮罩层宽度(任意css样式写法)", "height": "遮罩层高度(任意css样式写法)", "append": "元素选择器，追加到指定的元素", "position": "遮罩层定位方式(默认fixed)", "zIndex": "遮罩层层级(int)", "spacing": "图标与文字的间距(int)，单位px", "icon": { "type": "图标类别(int)(1-9)，默认1", "width": "图标宽度(int)，单位px", "height": "图标高度(int)，单位px", "p_size": "字体大小(int)，单位px" }, "color": { "bg": "背景颜色(支持 普通/rgb/rgba/16进制)", "icon": "图标颜色(支持 普通/rgb/rgba/16进制)", "word": "文字颜色(支持 普通/rgb/rgba/16进制)" } }
使用示例
// 实例化调用 var lj = new LoadingJs({ msg: "加载中...", // 加载文字 spacing: 20, // 图标文字间距 log: false, // 关闭控制台教程 icon: { // 图标配置 type: 3, // 图标样式3 width: 64, // 图标宽度 height: 64 // 图标宽度 }, color: { // 颜色配置 bg: "#000131", // 背景色 word: "#ffffff", // 加载文字颜色 icon: "#eeeeee" // 图标颜色 } });
// 实例化对象后的函数和基本属性 begin // 下列三个函数会改变配置对象的show属性 lj.remove(); // 移除 loading 元素 lj.resize(); // 重定位 loading 元素 lj.hide(); // 隐藏 loading 元素 lj.show(); // 显示 loading 元素 lj.config; // 配置信息(JSON) lj.config.id; // dom元素id // 实例化对象后的函数和基本属性 end
源码 - 压缩版
/** * 作者: 散人 * 版本: V1.5.3 * 博客: https://www.cnblogs.com/sanrenblog * 文档: https://www.cnblogs.com/sanrenblog/p/17037149.html */ 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(/;/g,'')}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.3';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(/;/g,''):'100%';property.height=property.height?property.height.toString().replace(/;/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};property.icon.p_size=(property.icon.p_size?property.icon.p_size.toString().replace(/[^0-9]/g):18)+'px';if(property.append){property.position=property.position?property.position:'absolute'}property.position=property.position?property.position:'fixed';property.append=property.append?property.append:'body';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:'+property.position+';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:'+property.icon.p_size+';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:'+property.position+';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:'+property.icon.p_size+';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:'+property.position+';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:'+property.icon.p_size+';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:'+property.position+';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:'+property.icon.p_size+';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:'+property.position+';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:'+property.icon.p_size+';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:'+property.position+';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:'+property.icon.p_size+';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:'+property.position+';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:'+property.icon.p_size+';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:'+property.position+';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:'+property.icon.p_size+';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:'+property.position+';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:'+property.icon.p_size+';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文档: 文档: https://www.cnblogs.com/sanrenblog/p/17037149.html\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 "append": "元素选择器，追加到指定的元素",\n "position": "遮罩层定位方式(默认fixed)",\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 "p_size": "字体大小(int)，单位px"\n },\n\n "color": {\n "bg": "背景颜色(支持 普通/rgb/rgba/16进制)",\n "icon": "图标颜色(支持 普通/rgb/rgba/16进制)",\n "word": "文字颜色(支持 普通/rgb/rgba/16进制)"\n }\n}\n=============== end ===============\n\n[API简述]\n=============== begin ===============\n1. show(): 创建/显示 loading 元素\n2. hide(): 隐藏 loading 元素\n3. resize(): 重定位 loading 元素\n4. remove(): 移除 loading 元素\n\n5. 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祝您使用愉快 (๑*◡*๑)')}this.resize=function(){let pa=document.querySelector(property.append),d=document.getElementById(property.id);d.style.width=pa.offsetWidth<1?'100%':pa.offsetWidth+'px';d.style.height=pa.offsetHeight<1?'100%':pa.offsetHeight+'px';d.style.left=pa.offsetLeft+'px';d.style.top=pa.offsetTop+'px';let ld=document.querySelector('#'+property.id+'>div'),ldp=document.querySelector('#'+property.id+'>p');let dW=d.offsetWidth,dH=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']=((dW-ldW)/2)+'px';ld.style['top']=(((dH-ldH)/2)-(ldH/2))+'px';ldp.style['left']=((dW-ldpW)/2)+'px';ldp.style['top']=(((dH-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(property.append).insertAdjacentHTML('beforeend',div_str);if(property.resize){window.addEventListener('resize',this.resize)}}this.resize();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',this.resize);this.config.show=false};this.config=property;if(!document.querySelector('.'+style_sign)){document.querySelector(property.append).insertAdjacentHTML('beforeend',style_str)}if(property.show){this.show()}}else{}}return _LoadingJs})();
源码 - 开发版
/** * 作者: 散人 * 版本: V1.5.3 * 博客: https://www.cnblogs.com/sanrenblog * 文档: https://www.cnblogs.com/sanrenblog/p/17037149.html */ 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(/;/g, '') } 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.3'; // 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(/;/g, '') : '100%'; // 遮罩层宽度 property.height = property.height ? property.height.toString().replace(/;/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}; // 图标配置 property.icon.p_size = (property.icon.p_size ? property.icon.p_size.toString().replace(/[^0-9]/g) : 18) + 'px'; // 字体大小 // 追加到的目标,改变定位方式 if (property.append) { property.position = property.position ? property.position : 'absolute'; } property.position = property.position ? property.position : 'fixed'; // 定位方式 property.append = property.append ? property.append : 'body'; // 追加到元素(选择器) // 遮罩层宽高设置 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:'+property.position+';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:' + property.icon.p_size + ';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:'+property.position+';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:' + property.icon.p_size + ';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:'+property.position+';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:' + property.icon.p_size + ';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:'+property.position+';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:' + property.icon.p_size + ';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:'+property.position+';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:' + property.icon.p_size + ';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:'+property.position+';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:' + property.icon.p_size + ';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:'+property.position+';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:' + property.icon.p_size + ';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:'+property.position+';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:' + property.icon.p_size + ';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:'+property.position+';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:' + property.icon.p_size + ';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; // case : // div_str = '<div id="' + property.id + '" class="loadingjs-tag-div"><p>' + property.msg + '</p></div>'; // style_str = '<style class="' + style_sign + '">.loadingjs-tag-div{width:' + property.width+';height:' + property.height+';position:'+property.position+';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:' + property.icon.p_size + ';color:' + property.color.word + '}</style>'; // break; // width:' + property.icon.width + 'px;height:' + property.icon.height + 'px; } if (property.log !== false) { console.log('欢迎使用 loading-js\n\n' + '作者: 散人\n' + '版本: V' + version + '\n' + '博客: https://www.cnblogs.com/sanrenblog\n' + '文档: 文档: https://www.cnblogs.com/sanrenblog/p/17037149.html\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' + ' "append": "元素选择器，追加到指定的元素",\n' + ' "position": "遮罩层定位方式(默认fixed)",\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' + ' "p_size": "字体大小(int)，单位px"\n' + ' },\n\n' + ' "color": {\n' + ' "bg": "背景颜色(支持 普通/rgb/rgba/16进制)",\n' + ' "icon": "图标颜色(支持 普通/rgb/rgba/16进制)",\n' + ' "word": "文字颜色(支持 普通/rgb/rgba/16进制)"\n' + ' }\n' + '}\n' + '=============== end ===============\n\n' + '[API简述]\n' + '=============== begin ===============\n' + '1. show(): 创建/显示 loading 元素\n' + '2. hide(): 隐藏 loading 元素\n' + '3. resize(): 重定位 loading 元素\n' + '4. remove(): 移除 loading 元素\n\n' + '5. 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' + '祝您使用愉快 (๑*◡*๑)'); } // 元素定位 this.resize = function() { let pa = document.querySelector(property.append), // 追加盒子 d = document.getElementById(property.id); // 遮罩总dom d.style.width = pa.offsetWidth < 1 ? '100%' : pa.offsetWidth + 'px'; d.style.height = pa.offsetHeight < 1 ? '100%' : pa.offsetHeight + 'px'; d.style.left = pa.offsetLeft + 'px'; d.style.top = pa.offsetTop + 'px'; let ld = document.querySelector('#' + property.id + '>div'), // 动画盒子 ldp = document.querySelector('#' + property.id + '>p'); // 文字盒子 let dW = d.offsetWidth, dH = d.offsetHeight, ldW = ld.offsetWidth, // 动画dom宽 ldH = ld.offsetHeight, // 动画dom高 ldpW = ldp.offsetWidth; // 文字dom宽 ldW = ldW ? ldW : property.icon.width; ldH = ldH ? ldH : property.icon.height; ldpW = ldpW ? ldpW : ldW; ld.style['left'] = ((dW - ldW) / 2) + 'px'; ld.style['top'] = (((dH - ldH) / 2) - (ldH / 2)) +'px'; ldp.style['left'] = ((dW - ldpW) / 2) + 'px'; ldp.style['top'] = (((dH - 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(property.append).insertAdjacentHTML('beforeend', div_str); // 窗口监听 if (property.resize) { window.addEventListener('resize', this.resize); } } this.resize(); // 元素定位 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', this.resize); this.config.show = false; }; // 配置对象 this.config = property; // style盒子 if (!document.querySelector('.' + style_sign)) { document.querySelector(property.append).insertAdjacentHTML('beforeend', style_str); } // 显示 if (property.show) { this.show(); } } } return _LoadingJs; })();
转载请附上本文链接！
