javascript自定义加载loading效果


Posted in Javascript onSeptember 15, 2020

本文实例为大家分享了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);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
图解JS原型和原型链实现原理
Sep 15 #Javascript
vue实现简单全选和反选功能
Sep 15 #Javascript
vscode 调试 node.js的方法步骤
Sep 15 #Javascript
js实现特别简单的钟表效果
Sep 14 #Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 #Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 #Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 #Javascript
You might like
php gzip压缩输出的实现方法
2013/04/27 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python 列表理解及使用方法
2017/10/27 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
如何理解Python中包的引入
2020/05/29 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
省三好学生申请材料
2014/01/22 职场文书
医院信息公开实施方案
2014/05/09 职场文书
留学生求职信
2014/06/03 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
解析Java中的static关键字
2021/06/14 Java/Android