hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

feat: add blank loading

Browse source
This commit is contained in:
KUN1007 2023-11-10 15:16:36 +08:00
parent 54a7bbcabf
commit 359527c24f
4 changed files with 96 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -7,6 +7,7 @@
type="image/svg+xml"
href="/src/assets/images/favicon.webp"
/>
<link rel="stylesheet" href="/kungalgame-loading.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
@ -15,7 +16,11 @@
<title>KUNGalgame</title>
</head>
<body>
<div id="app"></div>
<div id="app">
<div id="kungalgame-loading-container">
<div id="kungalgame-loading"><h2>Loading</h2></div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

84
public/kungalgame-loading.css Normal file
View file

@ -0,0 +1,84 @@
/* When page blank, loading */
:root {
--kungalgame-blue-1: #b6e3ff;
--kungalgame-blue-4: #218bff;
--kungalgame-trans-blue-1: #b6e3ff77;
--kungalgame-shadow-0: 0px 0px 17px 5px var(--kungalgame-blue-1);
}
#kungalgame-loading-container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
}
#kungalgame-loading {
height: 4.8px;
background: var(--kungalgame-blue-4);
box-shadow: var(--kungalgame-shadow-0);
box-sizing: border-box;
animation: loading 7.7s linear infinite;
position: relative;
}
#kungalgame-loading::after,
#kungalgame-loading::before {
content: '';
width: 10px;
height: 1px;
background: var(--kungalgame-blue-4);
position: absolute;
top: 9px;
right: -2px;
opacity: 0;
transform: rotate(-45deg) translateX(0px);
box-sizing: border-box;
animation: coli1 0.3s linear infinite;
}
#kungalgame-loading::before {
top: -4px;
transform: rotate(45deg);
animation: coli2 0.3s linear infinite;
}
#kungalgame-loading h2 {
position: absolute;
top: 17px;
color: var(--kungalgame-blue-4);
}
@keyframes loading {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes coli1 {
0% {
transform: rotate(-45deg) translateX(0px);
opacity: 0.7;
}
100% {
transform: rotate(-45deg) translateX(-45px);
opacity: 0;
}
}
@keyframes coli2 {
0% {
transform: rotate(45deg) translateX(0px);
opacity: 1;
}
100% {
transform: rotate(45deg) translateX(-45px);
opacity: 0.7;
}
}

9
src/components/loading/KUNGalgameProgess.vue
View file

@ -10,8 +10,8 @@
height: 4.8px;
display: inline-block;
position: relative;
background: #fff;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
background: var(--kungalgame-blue-4);
box-shadow: var(--kungalgame-shadow-0);
box-sizing: border-box;
animation: animFw 8s linear infinite;
}
@ -20,7 +20,10 @@
content: '';
width: 10px;
height: 1px;
background: #fff;
background: linear-gradient(
var(--kungalgame-trans-pink-1),
var(--kungalgame-trans-blue-1)
);
position: absolute;
top: 9px;
right: -2px;

2
src/components/setting-panel/components/Loli.vue
View file

@ -26,13 +26,11 @@ const isShowLoading = ref(false)
const reGetLoli = async () => {
isShowLoading.value = true
await new Promise((res) => setTimeout(res, 2000))
loliData.value = await useLoliDataURL()
isShowLoading.value = false
}
onMounted(async () => {
await new Promise((res) => setTimeout(res, 2000))
loliData.value = await useLoliDataURL()
})
</script>