javascript自定义加载加载效果

<强>引用文件

在App.vue中 　　 　　 　　& lt; scoped>风格; 　　@ import”。/common.css '; 　　& lt;/style> 　　 　　

在main.js中 　　 　　 　　从“进口工具。/工具的 　　Vue.prototype。工具=工具 　　 　　

tools.js 　　 　　 　　出口默认{//显示加载框- - -使用方法,例如:this.tool.showLoading(“正在加载”,这个“1”) 　　showLoading(消息、el类型){ 　　var html="; 　　html +=& lt;我class=" mui-spinner mui-spinner-white”祝辞& lt;/i>”; 　　html +=& lt; p class=蔽谋尽痹凇?(消息| |”数据加载中”)+ ' & lt;/p>;//遮罩层 　　var=document.getElementsByClassName面具(“mui-show-loading-mask”); 　　如果面具。长度==0){ 　　掩码=document.createElement (div); 　　mask.classList.add (“mui-show-loading-mask”);//console.log(类型)//自己添加内容…开始 　　如果(类型!==' 2 ',,类型){ 　　var winHig=document.documentElement.clientHeight; 　　如果(el。refs.nav美元){ 　　var heightNav=厄尔。refs.nav.offsetHeight美元; 　　var heightFix=厄尔。refs.fixed.offsetHeight美元; 　　如果(type===' 1 ') { 　　var loHig=winHig - heightNav heightFix +“px” 　　其他}{ 　　loHig=winHig - heightFix +“px” 　　} 　　mask.style。顶级=heightFix +“px” 　　mask.style。身高=loHig 　　} 　　}//自己添加内容…… 　　document.body.appendChild(面具); 　　面具。addEventListener (“touchmove函数(e) {e.stopPropagation ();e.preventDefault ();}); 　　其他}{ 　　面具[0].classList.remove (“mui-show-loading-mask-hidden”); 　　}//加载框 　　var面包=document.getElementsByClassName (“mui-show-loading”); 　　如果(烤面包。长度==0){ 　　烤面包=document.createElement (div); 　　toast.classList.add (“mui-show-loading”); 　　toast.classList.add (“loading-visible”); 　　document.body.appendChild(面包); 　　吐司。innerHTML=html; 　　吐司。addEventListener (“touchmove函数(e) {e.stopPropagation ();e.preventDefault ();}); 　　其他}{ 　　烤面包[0]。innerHTML=html; 　　吐司[0].classList.add (“loading-visible”); 　　} 　　},//隐藏加载框——使用方法,例如:this.tool.hideLoading (); 　　hideLoading(回调){ 　　var=document.getElementsByClassName面具(“mui-show-loading-mask”); 　　var面包=document.getElementsByClassName (“mui-show-loading”); 　　如果面具。长度比;0){ 　　面具[0].classList.add (“mui-show-loading-mask-hidden”); 　　} 　　如果(烤面包。长度比;0){ 　　吐司[0].classList.remove (“loading-visible”); 　　回调,,回调(); 　　} 　　} 　　 　　

common.css 　　 　　/* - - - - - - - - - - - - - - - - - mui.showLoading - - - - - - - - - - - - - - - */.mui-show-loading { 　　位置:固定; 　　填充:5 px; 　　宽度:120 px; 　　最小高度:120 px; 　　上图:45%; 　　左:50%; 　　margin-left: -60 px; 　　背景:rgba (0, 0, 0, 0.6); 　　text-align:中心; 　　border - radius: 5 px; 　　颜色:# FFFFFF; 　　可见性:隐藏; 　　保证金:0; 　　z - index: 2000; 　　 　　-webkit-transition-duration: 2; 　　transition-duration: 2; 　　透明度:0; 　　-webkit-transform:规模(0.9)翻译(-50%,-50%); 　　变换:规模(0.9)翻译(-50%,-50%); 　　-webkit-transform-origin: 0 0; 　　transform-origin: 0 0; 　　} 　　 　　.mui-show-loading。loading-visible { 　　透明度:1; 　　可见性:可见; 　　-webkit-transform:规模(1)翻译(-50%,-50%); 　　变换:规模(1)翻译(-50%,-50%); 　　} 　　 　　.mui-show-loading .mui-spinner { 　　margin-top: 24 px; 　　宽度:36 px; 　　高度:36 px; 　　} 　　 　　.mui-show-loading。text { 　　行高:1.6; 　　字体类型:-apple-system-font Helvetica Neue”,无衬线; 　　字体大小:14 px; 　　保证金:10 px 0 0; 　　颜色:# fff; 　　} 　　 　　.mui-show-loading-mask { 　　位置:固定; 　　z - index: 1000; 　　上图:0; 　　右:0; 　　左:0; 　　底部:0; 　　background - color: rgba (0, 0, 0, 0); 　　} 　　 　　.mui-show-loading-mask-hidden { 　　显示:没有!重要; 　　}/*吐司信息提示*/.mui-toast-container { 　　上图:5% !重要; 　　宽度:汽车; 　　text-align:中心; 　　} 　　 　　.mui-toast-message { 　　背景:url (/app/主题/违约/图片/toast.png)没有重演中心10 px # 000; 　　background - color: rgba (0, 0, 0, 0。8); 　　颜色:# fff;/* max-width: 90%;*/显示:inline-block; 　　宽度:汽车; 　　保证金:0汽车;/*填充:70 px 5 px 10 px 5 px;*/} 　　 　　.mui-spinner-white:{后 　　背景图片:url(/资产/loding.png); 　　} 　　 　　.mui-loading .mui-spinner { 　　显示:块; 　　 　　保证金:0汽车; 　　} 　　 　　.mui-spinner { 　　显示:inline-block; 　　 　　宽度:24 px; 　　高度:24 px; 　　 　　-webkit-transform-origin: 50%; 　　transform-origin: 50%; 　　-webkit-animation: spinner-spin 1 s step-end无限; 　　动画:spinner-spin 1 s step-end无限; 　　} 　　 　　.mui-btn .mui-spinner { 　　宽度:14 px; 　　高度:14 px; 　　 　　vertical-align: text-bottom; 　　} 　　 　　.mui-btn-block .mui-spinner { 　　宽度:22 px; 　　高度:22 px; 　　} 　　 　　.mui-spinner:{后 　　显示:块; 　　 　　宽度:100%; 　　高度:100%; 　　 　　内容:”; 　　平铺方式:不再重演; 　　背景位置:50%; 　　background-size: 100%; 　　} 　　 　　 　　@-webkit-keyframes spinner-spin { 　　0% { 　　-webkit-transform:旋转(0度); 　　} 　　 　　8.33333333% { 　　-webkit-transform:旋转(30度); 　　} 　　 　　16.66666667% { 　　-webkit-transform:旋转(60度); 　　} 　　 　　25% { 　　-webkit-transform:旋转(90度); 　　} 　　 　　33.33333333% { 　　-webkit-transform:旋转(120度); 　　} 　　 　　41.66666667% { 　　-webkit-transform:旋转(150度); 　　} 　　 　　50% { 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

javascript自定义加载加载效果