diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f44ee12..53fb417 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import '@/styles/style.scss' +import Spinner from "@/components/layouts/Spinner"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -28,6 +29,7 @@ export default function RootLayout({ className={`${geistSans.variable} ${geistMono.variable} antialiased`} > {children} + ); diff --git a/src/components/layouts/Spinner.tsx b/src/components/layouts/Spinner.tsx new file mode 100644 index 0000000..ff9d763 --- /dev/null +++ b/src/components/layouts/Spinner.tsx @@ -0,0 +1,7 @@ +export default function Spinner(){ + return( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index 78ba0b9..3ae03f1 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -2,4 +2,5 @@ @forward 'login'; @forward 'pop-contents'; @forward 'sub'; -@forward 'pdfview'; \ No newline at end of file +@forward 'pdfview'; +@forward 'spinner'; \ No newline at end of file diff --git a/src/styles/components/_spinner.scss b/src/styles/components/_spinner.scss new file mode 100644 index 0000000..f37f12d --- /dev/null +++ b/src/styles/components/_spinner.scss @@ -0,0 +1,37 @@ +.spinner-wrap{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba($color: #101010, $alpha: 0.5); + z-index: 2000000; +} +.loader { + width: 16px; + height: 16px; + border-radius: 50%; + background-color: #fff; + box-shadow: 32px 0 #fff, -32px 0 #fff; + position: relative; + animation: flash 0.5s ease-out infinite alternate; +} + +@keyframes flash { + 0% { + background-color: #FFF2; + box-shadow: 32px 0 #FFF2, -32px 0 #FFF; + } + 50% { + background-color: #FFF; + box-shadow: 32px 0 #FFF2, -32px 0 #FFF2; + } + 100% { + background-color: #FFF2; + box-shadow: 32px 0 #FFF, -32px 0 #FFF2; + } +} + \ No newline at end of file