qnloft
/
qnloft-onenav
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增loading

This commit is contained in:
rm 2024-01-11 11:19:07 +08:00
parent 55b6313ed7
commit 0ab4e958e1
1 changed files with 62 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
templates/qnloft/index.php
View File

@ -7,7 +7,8 @@
<?php echo $site['title']; ?> -
<?php echo $site['subtitle']; ?>
</title>
<link rel="shortcut icon" href="https://obsidian-img-use.oss-cn-beijing.aliyuncs.com/browser-img/qnloft-blog-favicon.png">
<link rel="shortcut icon"
href="https://obsidian-img-use.oss-cn-beijing.aliyuncs.com/browser-img/qnloft-blog-favicon.png">
<meta name="keywords" content="<?php echo $site['keywords']; ?>" />
<meta name="description" content="<?php echo $site['description']; ?>" />
<link rel="stylesheet" id="block-library-css" href="templates/qnloft/assets/css/block-library.min-5.6.2.css"
@ -77,6 +78,63 @@
</head>
<body class="io-grey-mode">
<div id="loading">
<style>
.loader {
width: 250px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: helvetica, arial, sans-serif;
font-weight: 900;
color: #07C160;
letter-spacing: 0.2em
}
.loader::before,
.loader::after {
content: "";
display: block;
width: 15px;
height: 15px;
background: #07C160;
position: absolute;
animation: load .7s infinite alternate ease-in-out
}
.loader::before {
top: 0
}
.loader::after {
bottom: 0
}
@keyframes load {
0% {
left: 0;
height: 30px;
width: 15px
}
50% {
height: 8px;
width: 40px
}
100% {
left: 235px;
height: 30px;
width: 15px
}
}
</style>
<div class="loader"><?php echo $site['title']; ?></div>
</div>
<div class="page-container">
<!-- 左侧 -->
<div id="sidebar" class="sticky sidebar-nav fade animate-nav mini-sidebar" style="width: 60px">
@ -96,9 +154,10 @@
<?php } ?>
</a>
<a href="" class="logo-collapsed">
<img src="templates/qnloft/assets/images/logos/qnLogo.png" height="40" class="logo-light" alt="青柠炸机街">
<img src="templates/qnloft/assets/images/logos/qnLogo_dark.png" height="40" class="logo-dark d-none"
<img src="templates/qnloft/assets/images/logos/qnLogo.png" height="40" class="logo-light"
alt="青柠炸机街">
<img src="templates/qnloft/assets/images/logos/qnLogo_dark.png" height="40"
class="logo-dark d-none" alt="青柠炸机街">
</a>
</div>
</div>