sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

new release #190

Merged
b merged 68 commits from staging into main 2024-09-06 18:59:34 +00:00
Conversation 0 Commits 68 Files Changed 60 +21 -9
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d627db5ac0 - Show all commits

4
src/components/LoadingSpinner/index.tsx
View File

@ -23,7 +23,9 @@ export const LoadingSpinner = (props: Props) => {
<div className={styles.loadingSpinnerOverlay}> <div className={styles.loadingSpinnerOverlay}>
<div className={styles.loadingSpinnerContainer}> <div className={styles.loadingSpinnerContainer}>
<div className={styles.loadingSpinner}></div> <div className={styles.loadingSpinner}></div>
{desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>} {desc && (
<p className={styles.loadingSpinnerDesc}>{'Loading...'}</p>
)}
</div> </div>
</div> </div>
) )

26
src/components/LoadingSpinner/style.module.scss
View File

@ -2,23 +2,29 @@
.loadingSpinnerOverlay { .loadingSpinnerOverlay {
position: fixed; position: fixed;
top: 0; inset: 0;
left: 0;
width: 100%;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 9999; z-index: 9999;
backdrop-filter: blur(10px);
} }
.loadingSpinnerContainer { .loadingSpinnerContainer {
width: 100%;
max-width: 500px;
margin: 25px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $overlay-background-color;
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
border-radius: 4px;
&.withHeight { &.withHeight {
min-height: 250px; min-height: 250px;
} }
@ -26,14 +32,18 @@
.loadingSpinner { .loadingSpinner {
background: url('/favicon.png') no-repeat center / cover; background: url('/favicon.png') no-repeat center / cover;
width: 40px; margin: 40px 25px;
height: 40px; width: 65px;
height: 65px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
.loadingSpinnerDesc { .loadingSpinnerDesc {
color: white; width: 100%;
margin-top: 13px; 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-size: 16px;
font-weight: 400; font-weight: 400;