javascript自定义加载loading效果

作者:落花流雨 时间:2024-04-27 15:23:14 

本文实例为大家分享了javascript自定义加载loading效果的具体代码,供大家参考,具体内容如下

加载中图片,底色为白色(看不到)

javascript自定义加载loading效果

效果如图:

javascript自定义加载loading效果

使用方法


this.tool.showLoading('加载中', this)
this.tool.showLoading('合成中', this)

this.tool.hideLoading()

引用文件

在App.vue中


<style scoped>
@import './common.css';
</style>

在main.js中


import tools from './tools'
Vue.prototype.tool = tools

tools.js


export default {
//显示加载框---使用方法,例如:this.tool.showLoading('正在加载',this,'1')
showLoading (message, el, type) {
 var html = '';
 html += '<i class="mui-spinner mui-spinner-white"></i>';
 html += '<p class="text">' + (message || "数据加载中") + '</p>';

//遮罩层
 var mask = 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) {
   var winHig = document.documentElement.clientHeight;
   if (el.$refs.nav) {
    var heightNav = el.$refs.nav.offsetHeight;
    var heightFix = el.$refs.fixed.offsetHeight;
    if (type === '1') {
     var loHig = 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");
 }
 //加载框
 var toast = 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) {
 var mask = document.getElementsByClassName("mui-show-loading-mask");
 var toast = 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: 0 0;
transform-origin: 0 0;
}

.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, "Helvetica Neue", sans-serif;
font-size: 14px;
margin: 10px 0 0;
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-repeat center 10px #000;
background-color: rgba(0, 0, 0, .8);
color: #fff;
/* max-width: 90%; */
display: inline-block;
width: auto;
margin: 0 auto;
/* padding: 70px 5px 10px 5px; */
}

.mui-spinner-white:after {
background-image: url(./assets/loding.png);
}

.mui-loading .mui-spinner {
display: block;

margin: 0 auto;
}

.mui-spinner {
display: inline-block;

width: 24px;
height: 24px;

-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: spinner-spin 1s step-end infinite;
animation: spinner-spin 1s step-end infinite;
}

.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-keyframes spinner-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);
}
}

@keyframes spinner-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);
}
}

来源:https://blog.csdn.net/weixin_44666644/article/details/108560051

标签:js,加载
0
投稿

猜你喜欢

  • python+opencv识别图片中的圆形

    2022-02-10 00:04:23
  • vue项目中data数据之间互相访问的实现

    2024-05-28 15:51:43
  • Python实现的概率分布运算操作示例

    2023-02-21 10:16:18
  • 深入理解golang的异常处理机制

    2024-02-04 10:02:37
  • Python selenium环境搭建实现过程解析

    2023-10-06 06:18:48
  • SQL Server和MySql中创建临时表

    2008-06-19 13:31:00
  • python3发送邮件需要经过代理服务器的示例代码

    2023-07-27 01:00:44
  • Python命名空间的本质和加载顺序

    2022-06-30 20:56:21
  • Python中垃圾回收和del语句详解

    2023-12-20 01:02:55
  • 使用Title提升可访问性二

    2009-11-16 12:53:00
  • Python中安装库的常用方法介绍

    2022-04-03 08:13:17
  • 用好Frontpage中的各种回车

    2008-02-21 14:33:00
  • Python中正则表达式的用法总结

    2021-04-23 17:04:49
  • 新手入门:防范SQL注入攻击的新办法

    2009-03-11 15:14:00
  • SqlServer Mysql数据库修改自增列的值及相应问题的解决方案

    2024-01-14 13:32:46
  • Python列出一个文件夹及其子目录的所有文件

    2023-12-08 17:49:01
  • 多列复合索引的使用 绕过微软sql server的一个缺陷

    2012-08-21 10:37:36
  • python的绘图工具matplotlib使用实例

    2023-10-09 13:23:28
  • 通过js脚本复制网页上的一个表格的不错实现方法

    2024-04-23 09:16:19
  • 详解Python 中的容器 collections

    2021-09-12 07:11:38
  • asp之家 网络编程 m.aspxhome.com