chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(directory): added a loader before dom is loaded

Browse Source
This commit is contained in:
Haoyu Xu
2023-10-13 22:47:17 -04:00
parent db55e71e39
commit 6b46e6fb0e
2 changed files with 84 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
directory/index.html
View File

@@ -1,14 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>aklive2d directory</title>
<script async defer data-website-id="05ee2d3d-66e0-429b-89ba-db112743a8c2" src="https://insights.halyul.dev/insights.js"
data-do-not-track="true" data-auto-track="false"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/App.jsx"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>aklive2d directory</title>
<script async defer data-website-id="05ee2d3d-66e0-429b-89ba-db112743a8c2"
src="https://insights.halyul.dev/insights.js" data-do-not-track="true" data-auto-track="false"></script>
<style>
.loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 1;
}
.loader.loaded {
opacity: 0;
transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;;
}
.loader .icon {
display: block;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-left: 0.3rem solid;
border-bottom: 0.3rem solid;
border-right: 0.3rem solid;
border-top: 0.3rem solid;
transform: translateY(-0.3rem) rotate(-45deg);
animation: icon-flash 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}
@media (prefers-color-scheme: dark) {
.loader {
background-color: #131313;
}
.loader .icon {
border-color: rgba(255, 255, 255, 87%);
}
}
@media (prefers-color-scheme: light) {
.loader {
background-color: #ececec;
}
.loader .icon {
border-color: rgba(0, 0, 0, 87%);
}
}
@keyframes icon-flash {
50% {
opacity: 0.2;
}
}
</style>
</head>
<body>
<div id="root"></div>
<div class="loader">
<span class="icon"></span>
</div>
<script type="module" src="/src/App.jsx"></script>
</body>
</html>

8
directory/src/routes/Root.jsx
View File

@@ -75,6 +75,14 @@ export default function Root() {
fetchOfficalUpdate()
}, [fetchOfficalUpdate])
useEffect(() => {
document.querySelector('.loader').classList.add('loaded')
setTimeout(() => {
document.querySelector('.loader').style.display = 'none'
}, 500)
}
, [])
return (
<>
<header className={header.header}>