昨天有個專案要用到載入層，尋思了一下，框架的載入層也就那樣，頻繁自己寫也不是事。
所以花了些時間封裝了一個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, // 圖示文字間距 log: false, // 關閉控制檯教程 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; })();
轉載請附上本文連結！