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;