From a1528a2ad8fc52d25f81352c6b66258d78cfd662 Mon Sep 17 00:00:00 2001 From: aleidk Date: Thu, 7 Mar 2024 17:20:45 -0300 Subject: [PATCH] feat(Layout): add loading spinner component and to layout Reusable spinner component Apply spinner to layout to show a "loading state" between transitions, the spinner only shows if the transition is taking more than .2 secconds --- src/assets/style/global.css | 4 +++ src/components/Spinner.astro | 63 ++++++++++++++++++++++++++++++++++++ src/layouts/Layout.astro | 43 +++++++++++++++++++++++- 3 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 src/components/Spinner.astro diff --git a/src/assets/style/global.css b/src/assets/style/global.css index 91bc0eb..ae24848 100644 --- a/src/assets/style/global.css +++ b/src/assets/style/global.css @@ -102,3 +102,7 @@ li:not(:last-child) { height: 100% !important; } } + +.d-none { + display: none; +} diff --git a/src/components/Spinner.astro b/src/components/Spinner.astro new file mode 100644 index 0000000..2229831 --- /dev/null +++ b/src/components/Spinner.astro @@ -0,0 +1,63 @@ +--- +interface Props { + size?: number; + color?: string; + bgColor?: string; +} + +const {size = 200, color= "#cad3f5", bgColor} = Astro.props; +--- + + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 257eda5..63d5062 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -4,9 +4,11 @@ export interface Props { title: string; } -const { title } = Astro.props; import '../assets/style/global.css'; import Navbar from '../components/Navbar.astro'; +import Spinner from '../components/Spinner.astro'; + +const { title } = Astro.props; --- @@ -28,12 +30,51 @@ import Navbar from '../components/Navbar.astro';
+
+ +
+ +