image upload spinner

2 files changed, 51 insertions, 1 deletions

diff --git a/public/css/main.css b/public/css/main.css
index 0314b3f..4819f38 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -308,6 +308,7 @@ footer {
     background-color: var(--hover);
     flex-shrink: 0;
     image-rendering: crisp-edges;
+    object-fit: cover;
 }
 
 .nb {
@@ -378,4 +379,52 @@ form {
         filter: invert(100%) !important;
         background-color: #bbbbbb !important;
     }
-}
\ No newline at end of file
+}
+
+.fullwidth {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.loading {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.loading div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 3px solid var(--text);
+    border-radius: 50%;
+    animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: var(--text) transparent transparent transparent;
+}
+
+.loading div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+
+.loading div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+  
+.loading div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+  
+@keyframes loading {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+}
+  
\ No newline at end of file
diff --git a/public/css/profile.css b/public/css/profile.css
index 4aff91b..8f212dd 100644
--- a/public/css/profile.css
+++ b/public/css/profile.css
@@ -30,6 +30,7 @@ body {
     height: inherit;
     background-color: var(--hover);
     border-radius: 0px 0px 20px 20px;
+    object-fit: cover;
 }
 
 #info {