javascript自定义加载loading效果
作者:落花流雨 发布时间:2024-04-27 15:23:14
标签:js,加载
本文实例为大家分享了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
0
投稿
猜你喜欢
- 除了使用Django内置表单,有时往往我们需要自定义表单。对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误&qu
- 本教程配置好后一劳永逸,不用再配置,每次只需要选择 Python 解释器即可打开KBEngine的服务器项目文件夹(资产目录)其主要工程目录
- 版本:ant design vue 3.2.4场景:使用Image图片组件预览功能需求:自定义预览遮罩层及预览图片的样式;不得影响到其他页面
- SQL查询服务器下所有数据库及数据库的全部表获取所有用户名SELECT * FROM sys.sysusers获取所有用户数据库SELECT
- 本文实例讲述了Go语言执行系统命令行命令的方法。分享给大家供大家参考。具体如下:执行Go代码时可以附加参数,包括要执行的命令和给命令的参数p
- class SLTimer(multiprocessing.Process): #from dateti
- 本文实例讲述了Python调用系统底层API播放wav文件的方法。分享给大家供大家参考,具体如下:这里未使用其他库,只是使用 pywin32
- 为什么需要协程协程的本质是将一段数据的运行状态进行打包,可以在线程之间调度,所以协程就是在单线程的环境下实现的应用程序级别的并发,就是把本来
- 本文实例讲述了python实现合并两个数组的方法。分享给大家供大家参考。具体如下:python合并两个数组,将两个数组连接成一个数组,例如,
- <input id="workname" style="width: 200px" name=
- 决策树分类与上一篇博客k近邻分类的最大的区别就在于,k近邻是没有训练过程的,而决策树是通过对训练数据进行分析,从而构造决策树,通过决策树来对
- 学习目标:学会使用windows系统安装MySQL数据库,供大家参考,具体内容如下1.打开浏览器输入SQL官网的下载地址:下载链接2.下载好
- 本文研究的主要是Python中optparser库的相关内容,具体如下。一直以来对optparser不是特别的理解,今天就狠下心,静下心研究
- Django2.1 + Python3.6 + nginx + uwsgi 部署到Ubuntu18.04材料准备准备一个Django项目准备
- 阅读:Mootools常用方法扩展(三) 继续Mootools常用方法扩展,这次是Window类上的扩展,也就是全局函数。方法:$param
- 如何准确地获得一个整数?当然可以,Format就是做这个的“专家”:function NumbersOnlyNoDecimals(
- 1.什么是并发编程并发编程是实现多任务协同处理,改善系统性能的方式。Python中实现并发编程主要依靠进程(Process):进程是计算机中
- 本文实例为大家分享了vue实现触底查询功能的具体代码,供大家参考,具体内容如下1.使用vant-list组件相关内容如下:2.对象绑定值的默
- 文章主要描述的是SQL Server到DB2连接服务器的正确实现过程,以及对其在实际操作中所要用到的实际操作环境的描述,以下就是对SQL S
- 不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉。当滚动网页时,它的位置一直