javascript自定义加载loading效果
本文实例为大家分享了javascript自定义加载loading效果的具体代码，供大家参考，具体内容如下
加载中图片，底色为白色(看不到)
效果如图：
使用方法
this.tool.showLoading('加载中',this)
this.tool.showLoading('合成中',this)
this.tool.hideLoading()
引用文件
在App.vue中
@import'./common.css';
在main.js中
importtoolsfrom'./tools' Vue.prototype.tool=tools
tools.js
exportdefault{
//显示加载框---使用方法，例如：this.tool.showLoading('正在加载',this,'1')
showLoading(message,el,type){
varhtml='';
html+='';
html+=''+(message||"数据加载中")+'';
//遮罩层
varmask=document.getElementsByClassName("mui-show-loading-mask");
if(mask.length==0){
mask=document.createElement('div');
mask.classList.add("mui-show-loading-mask");
//console.log(type)
//自己添加内容...start
if(type!=='2'&&type){
varwinHig=document.documentElement.clientHeight;
if(el.$refs.nav){
varheightNav=el.$refs.nav.offsetHeight;
varheightFix=el.$refs.fixed.offsetHeight;
if(type==='1'){
varloHig=winHig-heightNav-heightFix+'px'
}else{
loHig=winHig-heightFix+'px'
}
mask.style.top=heightFix+'px'
mask.style.height=loHig
}
}
//自己添加内容...End
document.body.appendChild(mask);
mask.addEventListener("touchmove",function(e){e.stopPropagation();e.preventDefault();});
}else{
mask[0].classList.remove("mui-show-loading-mask-hidden");
}
//加载框
vartoast=document.getElementsByClassName("mui-show-loading");
if(toast.length==0){
toast=document.createElement('div');
toast.classList.add("mui-show-loading");
toast.classList.add('loading-visible');
document.body.appendChild(toast);
toast.innerHTML=html;
toast.addEventListener("touchmove",function(e){e.stopPropagation();e.preventDefault();});
}else{
toast[0].innerHTML=html;
toast[0].classList.add("loading-visible");
}
},
//隐藏加载框----使用方法，例如：this.tool.hideLoading();
hideLoading(callback){
varmask=document.getElementsByClassName("mui-show-loading-mask");
vartoast=document.getElementsByClassName("mui-show-loading");
if(mask.length>0){
mask[0].classList.add("mui-show-loading-mask-hidden");
}
if(toast.length>0){
toast[0].classList.remove("loading-visible");
callback&&callback();
}
}
common.css
/*----------------mui.showLoading---------------*/
.mui-show-loading{
position:fixed;
padding:5px;
width:120px;
min-height:120px;
top:45%;
left:50%;
margin-left:-60px;
background:rgba(0,0,0,0.6);
text-align:center;
border-radius:5px;
color:#FFFFFF;
visibility:hidden;
margin:0;
z-index:2000;
-webkit-transition-duration:.2s;
transition-duration:.2s;
opacity:0;
-webkit-transform:scale(0.9)translate(-50%,-50%);
transform:scale(0.9)translate(-50%,-50%);
-webkit-transform-origin:00;
transform-origin:00;
}
.mui-show-loading.loading-visible{
opacity:1;
visibility:visible;
-webkit-transform:scale(1)translate(-50%,-50%);
transform:scale(1)translate(-50%,-50%);
}
.mui-show-loading.mui-spinner{
margin-top:24px;
width:36px;
height:36px;
}
.mui-show-loading.text{
line-height:1.6;
font-family:-apple-system-font,"HelveticaNeue",sans-serif;
font-size:14px;
margin:10px00;
color:#fff;
}
.mui-show-loading-mask{
position:fixed;
z-index:1000;
top:0;
right:0;
left:0;
bottom:0;
background-color:rgba(0,0,0,0);
}
.mui-show-loading-mask-hidden{
display:none!important;
}
/*toast信息提示*/
.mui-toast-container{
top:5%!important;
width:auto;
text-align:center;
}
.mui-toast-message{
background:url(/app/themes/default/images/toast.png)no-repeatcenter10px#000;
background-color:rgba(0,0,0,.8);
color:#fff;
/*max-width:90%;*/
display:inline-block;
width:auto;
margin:0auto;
/*padding:70px5px10px5px;*/
}
.mui-spinner-white:after{
background-image:url(./assets/loding.png);
}
.mui-loading.mui-spinner{
display:block;
margin:0auto;
}
.mui-spinner{
display:inline-block;
width:24px;
height:24px;
-webkit-transform-origin:50%;
transform-origin:50%;
-webkit-animation:spinner-spin1sstep-endinfinite;
animation:spinner-spin1sstep-endinfinite;
}
.mui-btn.mui-spinner{
width:14px;
height:14px;
vertical-align:text-bottom;
}
.mui-btn-block.mui-spinner{
width:22px;
height:22px;
}
.mui-spinner:after{
display:block;
width:100%;
height:100%;
content:'';
background-repeat:no-repeat;
background-position:50%;
background-size:100%;
}
@-webkit-keyframesspinner-spin{
0%{
-webkit-transform:rotate(0deg);
}
8.33333333%{
-webkit-transform:rotate(30deg);
}
16.66666667%{
-webkit-transform:rotate(60deg);
}
25%{
-webkit-transform:rotate(90deg);
}
33.33333333%{
-webkit-transform:rotate(120deg);
}
41.66666667%{
-webkit-transform:rotate(150deg);
}
50%{
-webkit-transform:rotate(180deg);
}
58.33333333%{
-webkit-transform:rotate(210deg);
}
66.66666667%{
-webkit-transform:rotate(240deg);
}
75%{
-webkit-transform:rotate(270deg);
}
83.33333333%{
-webkit-transform:rotate(300deg);
}
91.66666667%{
-webkit-transform:rotate(330deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
@keyframesspinner-spin{
0%{
transform:rotate(0deg);
}
8.33333333%{
transform:rotate(30deg);
}
16.66666667%{
transform:rotate(60deg);
}
25%{
transform:rotate(90deg);
}
33.33333333%{
transform:rotate(120deg);
}
41.66666667%{
transform:rotate(150deg);
}
50%{
transform:rotate(180deg);
}
58.33333333%{
transform:rotate(210deg);
}
66.66666667%{
transform:rotate(240deg);
}
75%{
transform:rotate(270deg);
}
83.33333333%{
transform:rotate(300deg);
}
91.66666667%{
transform:rotate(330deg);
}
100%{
transform:rotate(360deg);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。