自己封装的一个 loading 弹窗,以函数的形式展现
函数
/**
* @Description: 加载动画
* @params: text: String 文本
* @params: duration:Number 延迟时间(s) 默认1500
* @params: canClick:Boolean 是否可点击页面 默认 true
* @return: { close() }
* <div class="loading-box">
* <div class="loading-layer can-click"></div>
* <div class="loading-content">
* <div class="leader">
* <span :style="{'--i':i}" v-for="i in 10"></span>
* </div>
* <div class="leader-text">加载中...</div>
* </div>
* </div>
*
*/
function myLoadingToast({ text, duration = 1500, canClick = true }) {
var loadingBox = document.createElement("div"),
loadingLayer = document.createElement("div"),
loadingContent = document.createElement("div");
loadingBox.setAttribute("class", "loading-box-uid125");
loadingContent.setAttribute("class", "loading-content");
if (canClick) {
loadingLayer.setAttribute("class", 'loading-layer can-click');
} else {
loadingLayer.setAttribute("class", 'loading-layer');
}
var leader = document.createElement("div");
leader.setAttribute("class", "leader")
for (let index = 1; index <= 10; index++) {
var span = document.createElement("span");
span.setAttribute("style", "--i:" + index);
leader.appendChild(span)
}
loadingContent.appendChild(leader)
var leaderText = document.createElement("div");
leaderText.setAttribute("class", "leader-text");
leaderText.innerText = text.toString();
loadingContent.appendChild(leaderText);
var cssStyle = document.createElement('style');
cssStyle.type = 'text/css';
cssStyle.innerHTML = ".loading-box-uid125{position:relative;touch-action:none}.loading-box-uid125 .loading-layer{position:fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:2000}.loading-box-uid125 .loading-layer.can-click{z-index:-1}.loading-box-uid125 .loading-content{position:fixed;top:50%;left:50%;width:120px;height:120px;transform:translate(-50%, -50%);background-color:#575759;display:flex;z-index:2000;border-radius:10px}.loading-box-uid125 .loading-content .leader{position:relative;left:30px;top:10px;width:60px;height:60px}.loading-box-uid125 .loading-content .leader span{position:absolute;left:15px;top:15px;width:30px;height:30px;transform:rotate(calc(36deg * var(--i)))}.loading-box-uid125 .loading-content .leader span::before{content:'';position:absolute;top:0px;left:0px;width:6px;height:6px;background:#fff;border-radius:50%;animation:loading-boxLeaderAnimation 1.5s linear infinite;animation-delay:calc(.1s * var(--i))}@keyframes loading-boxLeaderAnimation{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(0)}}.loading-box-uid125 .loading-content .leader-text{position:absolute;top:80px;font-size:16px;color:#fff;width:100%;text-align:center}";
document.getElementsByTagName('head')[0].appendChild(cssStyle);
if (duration > 0) {
setTimeout(function () {
loadingBox.remove();
}, duration);
}
loadingBox.appendChild(loadingLayer);
loadingBox.appendChild(loadingContent);
document.body.appendChild(loadingBox)
function close() {
document.querySelectorAll(".loading-box-uid125").forEach(element => {
element.remove();
})
}
return {
close: close
}
}
html结构
<div class="loading-box">
<div class="loading-layer can-click"></div>
<div class="loading-content">
<div class="leader">
<span :style="{'--i':i}" v-for="i in 10"></span>
</div>
<div class="leader-text">加载中...</div>
</div>
</div>
css
.loading-box-uid125 {
position: relative;
touch-action: none;
}
.loading-box-uid125 .loading-layer {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 2000;
}
.loading-box-uid125 .loading-layer.can-click {
z-index: -1;
}
.loading-box-uid125 .loading-content {
position: fixed;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
transform: translate(-50%, -50%);
background-color: #575759;
display: flex;
z-index: 2000;
border-radius: 10px;
}
.loading-box-uid125 .loading-content .leader {
position: relative;
left: 30px;
top: 10px;
width: 60px;
height: 60px;
}
.loading-box-uid125 .loading-content .leader span {
position: absolute;
left: 15px;
top: 15px;
width: 30px;
height: 30px;
transform: rotate(calc(36deg * var(--i)));
}
.loading-box-uid125 .loading-content .leader span::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
animation: loading-boxLeaderAnimation 1.5s linear infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes loading-boxLeaderAnimation {
0% {
transform: scale(0);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(0);
}
}
.loading-box-uid125 .loading-content .leader-text {
position: absolute;
top: 80px;
font-size: 16px;
color: #fff;
width: 100%;
text-align: center;
}