mui 等待动画loading mui.showLoading

显示加载框:mui.showLoading("正在加载..","div"); //加载文字和类型,plus环境中类型为div时强制以div方式显示
隐藏加载框:mui.hideLoading(callback);//隐藏后的回调函数
注意:
加载框只会显示一个,多次调用showLoading只会显示最后一次调用的内容。
//扩展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);
/*----------------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:;
z-index:; -webkit-transition-duration: .2s;
transition-duration: .2s;
opacity:;
-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:;
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:;
top:;
right:;
left:;
bottom:;
}
.mui-show-loading-mask-hidden{
display: none !important;
}
mui.showLoading("正在加载..","div"); //加载文字和类型,plus环境中类型为div时强制以div方式显示
mui.hideLoading(callback);//隐藏后的回调函数
mui 等待动画loading mui.showLoading的更多相关文章
- [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- android image加载中等待动画
在布局中添加一个ImageViw和一个EditText. <ImageView android:id="@+id/loading_imageView_info" androi ...
- WPF 后台任务 等待动画 样例 && C# BackgroundWorker 详解
运行效果: 前台代码: <Window x :Class="Waiting.Window1" xmlns="http://schemas.microsoft.com ...
- WPF加载等待动画
原文:WPF加载等待动画 原文地址:https://www.codeproject.com/Articles/57984/WPF-Loading-Wait-Adorner 界面遮罩 <UserC ...
- salesforce 零基础学习(二十七)VF页面等待(loading)效果制作
进行查询的情况下,显示友好的等待效果可以让用户更好的了解目前的状态以及减少用户消极的等待,例如下图所示. VF提供了<apex:actionStatus>标签,,此标签用于显示一个AJAX ...
- MUI框架-03-自定义MUI控件样式
MUI框架-03-自定义MUI控件样式 开发请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 如何自定义MUI控件样式 mui 以 iOS 7的 UI 为基础,补充了 ...
- WPF 加载等待动画
原文:WPF 加载等待动画 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_29844879/article/details/80216587 ...
- cocos2d-x游戏开发(十五)游戏加载动画loading界面
个人原创,欢迎转载:http://blog.csdn.net/dawn_moon/article/details/11478885 这个资源加载的loading界面demo是在玩客网做逆转三国的时候随 ...
- Android 自定义动画 Loading
转自:http://my.oschina.net/janson2013/blog/118558 1.定义一个ImageView 定义一个ImageView是为了装载图片,其中的图片将被rotate用来 ...
随机推荐
- sitecore-多变量测试与A / B测试概念论述
sitecore-多变量检验和A / B检验的区别 A / B测试和多变量测试有什么区别?让我们来看看这些测试方法的方法,常见用途,优点和局限性. sitecore中A / B测试 A / B测试(您 ...
- 用shell脚本批量进行xss跨站攻击请求
由于执行的xss攻击请求他多了,初步估计要执行83次,而且还要执行3篇,如果手工一个一个去执行,说出去,我还配叫自动化大师吗: 有鉴于此,边打算自己编写一个脚本进行批量执行: 而短脚本的编写,非she ...
- CentOS 7 -防火墙设置--安装数据库,远程连接报错--Can't connect to MySQL server on localhost (10061)
前提简介:在CentOS 7 上安装了mysql5.7版本,已设置了远程访问权限,但是其他服务器无法访问到此Mysql,提示[Can't connect to MySQL server on loca ...
- 【题解】Luogu P5468 [NOI2019]回家路线
原题传送门 前置芝士:斜率优化 不会的可以去杜神博客学 这道题我考场上只会拆点跑最短路的70pts做法 后来回家后发现错误的爆搜都能拿满分(刀片) 还有很多人\(O(mt)\)过的,还是要坚持写正解好 ...
- MVC中使用SignalR打造酷炫实用的即时通讯功能(轉載)
資料來源:http://www.fangsi.net/1144.html 前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯 ...
- Laravel使用Redis共享Session
一.当系统的访问量上升的时候,使用Redis保存Session可以提高系统的性能,同时也方便多机负载的时候共享Session 打开config/database.php.在redis中增加sessio ...
- CSS 精灵技术(sprite)
一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
- OCR1:开源库
OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别方法将形状翻译 ...
- Socket网络编程-TCP编程
Socket网络编程-TCP编程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.socket介绍 1>.TCP/IP协议 2>.跨网络的主机间通讯 在建立通信连接的 ...
- 纯数据结构Java实现(9/11)(AVL)
欢迎访问我的自建博客: CH-YK Blog.