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 => ( {SPLASH.map(item => (
<div class={item.loading}> <div class={item.loading}>
<div class="splash-loading-spinner"><div class="spinner"></div></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-progressbar"><div class="progressbar"></div></div>
<div class="splash-loading-jumping-balls"> <div class="splash-loading-jumping-balls">
<div class="b-container"> <div class="b-container">
<span class="ball"></span> <span class="ball"></span>
<span class="ball"></span> <span class="ball"></span>
<span class="ball"></span> <span class="ball"></span>
</div>
</div> </div>
<div class="splash-loading-glowing-bars"> </div>
<div class="bars-container"> <div class="splash-loading-glowing-bars">
<span class="bar"></span> <div class="bars-container">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span> <span class="bar"></span>
</div> <span class="bar"></span>
</div> </div>
</div>
</div> </div>
))} ))}
</div> </div>

24
astro/styles/splash.scss
View file

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