diff --git a/src/components/LoadingSpinner/index.tsx b/src/components/LoadingSpinner/index.tsx index 4e2a0d9..0df8c25 100644 --- a/src/components/LoadingSpinner/index.tsx +++ b/src/components/LoadingSpinner/index.tsx @@ -23,7 +23,9 @@ export const LoadingSpinner = (props: Props) => {
- {desc && {desc}} + {desc && ( +

{'Loading...'}

+ )}
) diff --git a/src/components/LoadingSpinner/style.module.scss b/src/components/LoadingSpinner/style.module.scss index 00852c8..0697f6b 100644 --- a/src/components/LoadingSpinner/style.module.scss +++ b/src/components/LoadingSpinner/style.module.scss @@ -2,23 +2,29 @@ .loadingSpinnerOverlay { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; + inset: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; + backdrop-filter: blur(10px); } .loadingSpinnerContainer { + width: 100%; + max-width: 500px; + margin: 25px 20px; + display: flex; flex-direction: column; align-items: center; justify-content: center; + background: $overlay-background-color; + box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1); + border-radius: 4px; + &.withHeight { min-height: 250px; } @@ -26,14 +32,18 @@ .loadingSpinner { background: url('/favicon.png') no-repeat center / cover; - width: 40px; - height: 40px; + margin: 40px 25px; + width: 65px; + height: 65px; animation: spin 1s linear infinite; } .loadingSpinnerDesc { - color: white; - margin-top: 13px; + width: 100%; + padding: 15px; + border-top: solid 1px rgba(0, 0, 0, 0.1); + text-align: center; + color: rgba(0, 0, 0, 0.5); font-size: 16px; font-weight: 400;