d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-15 23:16:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

starter 遮罩

Browse Source
This commit is contained in:
tangly1024
2024-10-31 21:22:10 +08:00
parent 9e85f4d1c2
commit de4d7cf896
3 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/LoadingCover.js
View File

@@ -13,7 +13,7 @@ export default function LoadingCover() {
if (onLoading) {
setIsVisible(true)
} else {
const timeout = setTimeout(() => setIsVisible(false), 1500) // 等待淡出动画结束
const timeout = setTimeout(() => setIsVisible(false), 1800) // 等待淡出动画结束
return () => clearTimeout(timeout)
}
}, [onLoading])
@@ -36,33 +36,39 @@ export default function LoadingCover() {
<div className='mx-auto'>
<style global>
{`
.loader {
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
background: #000;
box-shadow: 0 0 0 0 #0004;
animation: l2 1.5s infinite linear;
position: relative;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 #0004;
animation: inherit;
animation-delay: -0.5s;
}
.loader:after {
animation-delay: -1s;
}
@keyframes l2 {
100% {
box-shadow: 0 0 0 40px #0000;
}
}`}
.loader {
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
background: #000;
box-shadow: 0 0 0 0 #0004;
animation: l2 1.5s infinite linear;
position: relative;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 #0004;
animation: inherit;
animation-delay: -0.5s;
}
.loader:after {
animation-delay: -1s;
}
/* 深色模式下的样式 */
.dark .loader {
background: #fff; /* 白色或灰色 */
box-shadow: 0 0 0 0 #fff4; /* 使用白色阴影 */
}
@keyframes l2 {
100% {
box-shadow: 0 0 0 40px #0000;
}
}
`}
</style>
<div className='loader'></div>
</div>