117 lines
3.1 KiB
HTML
117 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||
|
||
<!-- loading 页面，todo 这块都可以不要，后面删除，先精简代码，后续考虑组件添加 -->
|
||
<div id="loading-box" onclick="heo.hideLoading()"
|
||
th:fragment="loading-box"
|
||
th:if="${theme.config.other.loadingBoxs.loadingBoxEnable} and not ${#strings.isEmpty(theme.config.other.loadingBoxs.loadingBoxImg)}">
|
||
|
||
|
||
<style type="text/css">
|
||
|
||
#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);
|
||
}
|
||
|
||
#loading-box {
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
#loading-box .loading-bg {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
background: var(--heo-background);
|
||
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;
|
||
}
|
||
|
||
@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 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>
|
||
|
||
<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>
|
||
|
||
</div>
|
||
|
||
</html> |