github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

移除加载动画

This commit is contained in:
liuzhihang 2022-12-31 21:03:47 +08:00
parent 13bb8716d1
commit 5eac3756b2
3 changed files with 42 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
templates/links.html
View File

@ -1,46 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'links')" <html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'links')"
xmlns:th="http://www.thymeleaf.org"> xmlns:th="http://www.thymeleaf.org">
<style type="text/css">#loading-box .loading-bg {
display: flex;
width: 100%;
height: 100%;
position: fixed;
background: var(--heo-maskbgdeep);
z-index: 1999;
opacity: 1;
transition: 0.3s;
pointer-events: all;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#loading-box.loaded .loading-bg {
opacity: 0;
pointer-events: none;
}
#loading-box .loading-img {
width: 100px;
margin: auto;
animation-duration: 0.3s;
animation-name: loadingAction;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes loadingAction {
from {
opacity: 1;
}
to {
opacity: 0.6;
}
}
</style>
<th:block th:fragment="content"> <th:block th:fragment="content">
<div class="page" id="body-wrap"> <div class="page" id="body-wrap">

2
templates/modules/layouts/layout.html
View File

@ -98,7 +98,7 @@
coverColor(); coverColor();
} }
if ([[${theme.config.other.loadingBox} and not ${#strings.isEmpty(theme.config.other.loadingBoxImg)}]]) { if ([[${theme.config.other.loadingBox}]]) {
// 移除加载动画 // 移除加载动画
removeLoading(); removeLoading();
} }

41
templates/modules/loading-box.html
View File

@ -5,6 +5,47 @@
<div id="loading-box" onclick="heo.hideLoading()" <div id="loading-box" onclick="heo.hideLoading()"
th:fragment="loading-box" th:fragment="loading-box"
th:if="${theme.config.other.loadingBox} and not ${#strings.isEmpty(theme.config.other.loadingBoxImg)}"> th:if="${theme.config.other.loadingBox} and not ${#strings.isEmpty(theme.config.other.loadingBoxImg)}">
<style type="text/css">
#loading-box .loading-bg {
display: flex;
width: 100%;
height: 100%;
position: fixed;
background: var(--heo-maskbgdeep);
z-index: 1999;
opacity: 1;
transition: 0.3s;
pointer-events: all;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#loading-box.loaded .loading-bg {
opacity: 0;
pointer-events: none;
}
#loading-box .loading-img {
width: 100px;
margin: auto;
animation-duration: 0.3s;
animation-name: loadingAction;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes loadingAction {
from {
opacity: 1;
}
to {
opacity: 0.6;
}
}
</style>
<div class="loading-bg"> <div class="loading-bg">
<img class="loading-img" th:src="${theme.config.other.loadingBoxImg}"> <img class="loading-img" th:src="${theme.config.other.loadingBoxImg}">
</div> </div>