javascript自定義加載loading效果
更新時(shí)間：2020年09月15日 17:12:27 作者：落花流雨
這篇文章主要為大家詳細(xì)介紹了javascript自定義加載loading效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了javascript自定義加載loading效果的具體代碼，供大家參考，具體內(nèi)容如下
加載中圖片，底色為白色(看不到)
效果如圖：
使用方法
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 || "數(shù)據(jù)加載中") + '</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)
// 自己添加內(nèi)容...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
}
}
// 自己添加內(nèi)容...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);
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
我們平時(shí)在寫代碼的過程中，好像很少需要自己手動(dòng)進(jìn)行垃圾回收，那么V8是如何來減少內(nèi)存占用，從而避免內(nèi)存溢出而導(dǎo)致程序崩潰的情況的，為了更高效地回收垃圾，V8引入了兩個(gè)垃圾回收器，它們分別針對不同場景進(jìn)行工作2023-06-06
這篇文章主要介紹了使用JS中的Replace()方法遇到的問題小結(jié),需要的朋友可以參考下2017-10-10
本文主要介紹了基本DOM節(jié)點(diǎn)操作，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
做項(xiàng)目的時(shí)候遇到一個(gè)返回查詢內(nèi)容里面，只取最大和最小值問題，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出菜單功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
主要是測試了數(shù)組 push()方法與直接相加這兩種在JS引擎上性能的實(shí)際處理情況。程序代碼簡單明了，沒什么好解釋的。2009-12-12
這篇文章主要介紹了JavaScript?引用類型之原始值包裝類型String,String是對應(yīng)字符串的引用類型。要?jiǎng)?chuàng)建一個(gè)String?對象，使用String?構(gòu)造函數(shù)并傳入一個(gè)數(shù)值,更多相關(guān)內(nèi)容需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了javascript禁止超鏈接跳轉(zhuǎn)的方法,結(jié)合實(shí)例分析了JavaScript事件機(jī)制與鼠標(biāo)事件的響應(yīng)操作技巧,需要的朋友可以參考下2016-02-02
如何在webpack項(xiàng)目中調(diào)試loader插件
最近在學(xué)習(xí)webpack，本文主要介紹了loader插件的調(diào)試方法，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)炫酷的煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09