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 相关文章推荐
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
微信小程序实现简单购物车功能
Dec 30 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
利用Python获取操作系统信息实例
2016/09/02 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python如何为创建大量实例节省内存
2018/03/20 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
基于python 取余问题(%)详解
2020/06/03 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
分公司任命书
2014/06/06 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
建国大业观后感800字
2015/06/01 职场文书
聘任书的格式及模板
2019/10/28 职场文书
Python合并多张图片成PDF
2021/06/09 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers