104 lines
2.9 KiB
HTML
104 lines
2.9 KiB
HTML
|
<!-- loading页面 -->
|
||
|
|
<th:block
|
||
|
|
th:if="${theme.config.other.loadingBoxs.loadingBoxEnable} and not ${#strings.isEmpty(theme.config.other.loadingBoxs.loadingBoxImg)}">
|
||
|
|
<style type="text/css">
|
||
|
|
#loading-box {
|
||
|
|
-webkit-user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading-box .loading-bg {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: fixed;
|
||
|
|
background: var(--heo-card-bg);
|
||
|
|
z-index: 1999;
|
||
|
|
opacity: 1;
|
||
|
|
transition: 0.2s;
|
||
|
|
pointer-events: all;
|
||
|
|
animation: showLoading 0.3s 0s backwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading-box.loaded .loading-bg {
|
||
|
|
pointer-events: none;
|
||
|
|
transition: 0.2s;
|
||
|
|
animation: hideLoading 0.3s 0s forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading-box .loading-img {
|
||
|
|
width: 100px;
|
||
|
|
margin: auto;
|
||
|
|
animation-duration: 0.2s;
|
||
|
|
animation-name: loadingAction;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-direction: alternate;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading-box .loading-image-dot {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
background: #6bdf8f;
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 6px solid #fff;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
-webkit-transform: translate(18px, 24px);
|
||
|
|
-moz-transform: translate(18px, 24px);
|
||
|
|
-o-transform: translate(18px, 24px);
|
||
|
|
-ms-transform: translate(18px, 24px);
|
||
|
|
transform: translate(18px, 24px);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes loadingAction {
|
||
|
|
from {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes hideLoading {
|
||
|
|
from {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes showLoading {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="loading-box" onclick="heo.hideLoading()">
|
||
|
|
<div class="loading-bg">
|
||
|
|
<img class="loading-img" style="border-radius: 50%;" th:src="${theme.config.other.loadingBoxs.loadingBoxImg}">
|
||
|
|
<div class="loading-image-dot"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var preloader = {
|
||
|
|
endLoading: () => {
|
||
|
|
//- document.body.style.overflow = 'auto';
|
||
|
|
document.getElementById('loading-box').classList.add("loaded")
|
||
|
|
},
|
||
|
|
initLoading: () => {
|
||
|
|
//- document.body.style.overflow = '';
|
||
|
|
document.getElementById('loading-box').classList.remove("loaded")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
window.addEventListener('load', preloader.endLoading())
|
||
|
|
setTimeout(function () {
|
||
|
|
preloader.endLoading();
|
||
|
|
}, 3000)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</th:block>
|