Korbs/Nexus-Polestar
Archived
1
Fork 0
Code Issues Pull requests Activity

Update splash

Browse source
This commit is contained in:
KorbsStudio 2023-02-08 17:51:29 -05:00
parent 30e1401fa9
commit 10ea724c49
No known key found for this signature in database
2 changed files with 26 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
astro/components/Splash.astro
View file

@ -11,22 +11,22 @@ import '../styles/splash.scss'
{SPLASH.map(item => (
<div class={item.loading}>
<div class="splash-loading-spinner"><div class="spinner"></div></div>
<div class="splash-loading-progressbar"><div class="progressbar"></div></div>
<div class="splash-loading-jumping-balls">
<div class="b-container">
<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>
</div>
<div class="splash-loading-spinner"><div class="spinner"></div></div>
<div class="splash-loading-progressbar"><div class="progressbar"></div></div>
<div class="splash-loading-jumping-balls">
<div class="b-container">
<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>
</div>
<div class="splash-loading-glowing-bars">
<div class="bars-container">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
<div class="splash-loading-glowing-bars">
<div class="bars-container">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
))}
</div>

24
astro/styles/splash.scss
View file

@ -21,9 +21,9 @@
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
opacity: 1;
pointer-events: none;
animation: 2.4s splash ease-in-out;
// animation: 2.4s splash ease-in-out;
.splash-content {
position: fixed;
top: 50%;
@ -44,7 +44,6 @@
left: 50%;
transform: translate(-50%);
.Spinner {
.splash-loading-spinner {display: none}
.splash-loading-progressbar {display: none}
.splash-loading-glowing-bars {display: none}
.splash-loading-jumping-balls {display: none}
@ -61,7 +60,7 @@
}
@keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(359deg)}}
}
.Progressbar {
.ProgressBar {
.splash-loading-spinner {display: none}
.splash-loading-glowing-bars {display: none}
.splash-loading-jumping-balls {display: none}
@ -75,9 +74,10 @@
content: "";
position: absolute;
background: lightblue;
width: 0%;
animation: 1s LOAD ease-in-out
width: 100%;
animation: 2s ProgressComplete linear;
}
@keyframes ProgressComplete {from {width: 0%} to {width: 100%}}
}
.JumpingBalls {
.splash-loading-progressbar {display: none}
@ -87,7 +87,7 @@
display: flex;
justify-content: space-between;
align-items: center;
width: 60px;
width: 40px;
flex-direction: row;
}
@ -95,8 +95,8 @@
background-color: #fff;
border-radius: 50%;
display: block;
width: 15px;
height: 15px;
width: 8px;
aspect-ratio: 1;
animation: jump 0.7s ease-in-out infinite;
}
@ -127,14 +127,14 @@
display: flex;
justify-content: space-between;
align-items: center;
width: 40px;
width: 14px;
flex-direction: row;
}
.bar {
background-color: #fff;
height: 50px;
width: 10px;
height: 24px;
width: 2px;
display: block;
animation: increase 1s ease-in-out infinite;
}