转载一个 mui 等待动画 mui.showLoading

写在前面：
好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件，为了统一组件样式和体验，写了这么一个扩展插件。
CSS和JS代码耦合性应该还是较低的，不妥之处欢迎指教！
优点：可以同时兼容Html5和plus，不必为不同环境单独分别Loading组件。
缺点：在页面嵌套情况下，遮罩仅对当前页面起作用。

使用方法：
#显示加载框：

mui.showLoading("正在加载..","div"); //加载文字和类型，plus环境中类型为div时强制以div方式显示

#隐藏加载框：

mui.hideLoading(callback);//隐藏后的回调函数

注意：
加载框只会显示一个，多次调用showLoading只会显示最后一次调用的内容。

#Javascript代码：

//扩展mui.showLoading
(function($, window) {//显示加载框$.showLoading = function(message,type) {if ($.os.plus && type !== 'div') {$.plusReady(function() {plus.nativeUI.showWaiting(message);});} else {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");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");}}   };//隐藏加载框$.hideLoading = function(callback) {if ($.os.plus) {$.plusReady(function() {plus.nativeUI.closeWaiting();});} 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();}}
})(mui, window);

#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;
}
.mui-show-loading-mask-hidden{display: none !important;
}

#效果点我查看实际演示效果

本文非原创转自分享一个mui扩展插件mui.showLoading加载框

转载一个 mui 等待动画 mui.showLoading相关推荐

mui 加载动画_mui 等待动画loading mui.showLoading
显示加载框: mui.showLoading("正在加载..","div"); //加载文字和类型,plus环境中类型为div时强制以div方式显示隐藏加载框 ...
android 自定义园动画,Android动画：一个等待动画的制作过程
看到一个很好玩的gif等待动画,记录一下制作过程. 先上图,展示一下这gif. 图中四个空心圆,一个实心园,依次作规则双星运动. 三个晚上,目前已经已经实现了.又学到了不少东西,这几天把博客写完. 放 ...
MUI框架 · 异步请求：mui.get()、mui.ajax()、mui.post() 技术罗列
MUI自己的一套异步请求的语法:mui.get().mui.ajax().mui.post() 技术罗列官网地址:ajax 官方转载 · 如下: mui框架基于htm5plus的XMLHttpReq ...
mui教程1——mui介绍、创建mui项目与初步使用、MUI常用代码提示、webview基本操作、事件管理、mui的内置函数
一.MUI资源索引及MUI介绍 1,资源索引官网:http://dev.dcloud.net.cn/mui/ MUI官方文档:http://dev.dcloud.net.cn/mui/ui/ 调用手 ...
anime.js 实战：实现一个带有描边动画效果的复选框...
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
WPF 加载等待动画
WPF 加载等待动画原文:WPF 加载等待动画版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_29844879/article/detail ...
用 Rust 写一个声控小动画
某一天,朋友发给我这样一张图: 这张图片原本的目的是用于介绍一种深度学习算法,这种算法能够识别不同角度的长条形物体.这张图片用来表示识别时所用到的先验框. 虽然图形本身的绘制原理比较简单,但很适合作为 ...
unity 等待...动画_介绍Unity 2019.1的动画索具预览包
unity 等待...动画 The Animation Rigging package for Unity 2019.1 enables users to set up procedural moti ...
ae渲染存在偏移_（图文+视频）C4D+AE野教程：一起来制作一个MG方块动画吧
又有好多天没写文章了,确实没办法,临近春节了,一直在催生意上的款,微信上很多鹿友的消息我都没时间回复. 结果款还是没回来,文章也没写,唉,今年春节估计会喝西北风了,来看问题吧: 一位鹿友问的问题我把视 ...
运用计算机来动画制作的视频,如何制作一个时钟转动动画视频?电脑制作动画的软件制作时钟转动的小视频的方法...
今天小编要来介绍的是制作动画的软件,可以用于制作时钟转动的动画效果,之前小编就介绍过时钟动画制作的方法,但今天的方法更先进哦,这里的时钟的样式还有颜色都可以自定义的哦.制作动画的软件是什么?不是手机自 ...

转载一个 mui 等待动画 mui.showLoading

转载一个 mui 等待动画 mui.showLoading相关推荐

最新文章

热门文章