From 3e998ca2a0dea9b12701fc6981ac01c28e0ea895 Mon Sep 17 00:00:00 2001 From: KorbsStudio Date: Tue, 7 Feb 2023 16:46:24 -0500 Subject: [PATCH] Add Splash --- astro/components/Splash.astro | 35 ++++++++ astro/config.ts | 13 ++- astro/layouts/App.astro | 2 + astro/styles/splash.scss | 145 ++++++++++++++++++++++++++++++++++ 4 files changed, 193 insertions(+), 2 deletions(-) create mode 100644 astro/components/Splash.astro create mode 100644 astro/styles/splash.scss diff --git a/astro/components/Splash.astro b/astro/components/Splash.astro new file mode 100644 index 0000000..2ca9b00 --- /dev/null +++ b/astro/components/Splash.astro @@ -0,0 +1,35 @@ +--- +import { APP, SPLASH } from '../config' +import '../styles/splash.scss' +--- + +
+
+ + +
+ + {SPLASH.map(item => ( +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ ))} +
+
+
+ diff --git a/astro/config.ts b/astro/config.ts index b0b0725..77b76e9 100644 --- a/astro/config.ts +++ b/astro/config.ts @@ -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", diff --git a/astro/layouts/App.astro b/astro/layouts/App.astro index 8a65f3b..614fce5 100644 --- a/astro/layouts/App.astro +++ b/astro/layouts/App.astro @@ -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'
+
diff --git a/astro/styles/splash.scss b/astro/styles/splash.scss new file mode 100644 index 0000000..aa48ba1 --- /dev/null +++ b/astro/styles/splash.scss @@ -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); + } + } + } + } + } +} \ No newline at end of file