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

Add Splash

Browse source
This commit is contained in:
KorbsStudio 2023-02-07 16:46:24 -05:00
parent 1b2157a405
commit 3e998ca2a0
No known key found for this signature in database
4 changed files with 193 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
astro/components/Splash.astro Normal file
View file

@ -0,0 +1,35 @@
---
import { APP, SPLASH } from '../config'
import '../styles/splash.scss'
---
<div class="splash">
<div class="splash-content">
<img src="./logo.png">
<div class="splash-loading">
{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>
<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>
</div>
</div>

13
astro/config.ts
View file

@ -5,7 +5,16 @@ export const APP = [{
sourcecode: "https://github.com/company/app-name"
}]
// Top tabs of your sidbear
// Splash
export const SPLASH = [
{
loading: "Spinner", // "Spinner" "Pulse" "ProgressBar" "LogoOnly" "None"
background: "#121212"
}
]
// Sidebar
/// Top tabs of your sidbears
export const SIDEBARTOP = [
{
text: "Dashboard",
@ -31,7 +40,7 @@ export const SIDEBARTOP = [
},
]
// Bottoms tabs of your sidebar
/// Bottoms tabs of your sidebar
export const SIDEBARBOTTOM = [
{
text: "Settings",

2
astro/layouts/App.astro
View file

@ -1,4 +1,5 @@
---
import Splash from '../components/Splash.astro'
import Sidebar from '../components/Sidebar.astro'
import Dashboard from '../components/pages/Dashboard.md'
import Tab2 from '../components/pages/Tab2.astro'
@ -13,6 +14,7 @@ import '../styles/index.scss'
<script defer src="./font-awesome-6.2.1/js/all.js"></script>
<div class="content">
<Splash />
<Sidebar />
<div class="pages">
<div id="Dashboard" class="page active"><Dashboard /></div>

145
astro/styles/splash.scss Normal file
View file

@ -0,0 +1,145 @@
.splash {
position: fixed;
z-index: 100;
background: #121212;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
.splash-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
img {
width: 100px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.splash-loading {
position: fixed;
bottom: 25%;
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}
.spinner {
border-radius: 500px;
width: 24px;
aspect-ratio: 1;
border-width: 5px;
border-top-color: white !important;
border-style: solid;
border-color: rgb(255 255 255 / 25%);
animation: 1s spin linear;
animation-iteration-count: infinite;
}
@keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(359deg)}}
}
.Progressbar {
.splash-loading-spinner {display: none}
.splash-loading-glowing-bars {display: none}
.splash-loading-jumping-balls {display: none}
.progressbar, .progressbar::before {
background: rgb(173 216 230 / 25%);
height: 6px;
width: 250px;
border-radius: 24px;
}
.progressbar::before {
content: "";
position: absolute;
background: lightblue;
width: 0%;
animation: 1s LOAD ease-in-out
}
}
.JumpingBalls {
.splash-loading-progressbar {display: none}
.splash-loading-spinner {display: none}
.splash-loading-glowing-bars {display: none}
.b-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 60px;
flex-direction: row;
}
.b-container .ball {
background-color: #fff;
border-radius: 50%;
display: block;
width: 15px;
height: 15px;
animation: jump 0.7s ease-in-out infinite;
}
.b-container .ball:nth-child(2) {
animation-delay: 0.15s;
}
.b-container .ball:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes jump {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
}
.GlowingBars {
.splash-loading-progressbar {display: none}
.splash-loading-spinner {display: none}
.splash-loading-jumping-balls {display: none}
.bars-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 40px;
flex-direction: row;
}
.bar {
background-color: #fff;
height: 50px;
width: 10px;
display: block;
animation: increase 1s ease-in-out infinite;
}
.bar:nth-child(2) {
animation-delay: 0.25s;
}
.bar:nth-child(3) {
animation-delay: 0.5s;
}
@keyframes increase {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.6);
}
}
}
}
}
}