upload spinner and tidying up the ui

1 files changed, 85 insertions, 21 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 42fc0ed..ca70e63 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -500,6 +500,7 @@ footer::before {
 
 .upload-area {
     position: relative;
+    overflow: hidden;
 }
 
 .upload-drag-box {
@@ -508,37 +509,100 @@ footer::before {
 
 .upload-loading-indicator {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(26, 0, 51, 0.55);
+    background: #1a0033cc;
+    box-shadow: none;
+    transition: none;
     z-index: 20;
     pointer-events: none;
 }
 
-.upload-loading-icon {
-    font-size: 2.5em;
-    color: #ff99cc;
-    filter: drop-shadow(0 0 8px #ff99cc88);
-    animation: uploadspin 1.2s linear infinite;
+.ib-loader-spinner {
+    position: relative;
+    width: 32px;
+    height: 32px;
 }
 
-.upload-loading-icon {
-    font-size: 3em;
-    color: #ff99cc;
-    filter: drop-shadow(0 0 8px #ff99cc88);
-    animation: uploadspin 1.2s linear infinite;
+.ib-loader-seg {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    background: #222244;
+    border: 1px solid #fff;
+    border-radius: 1px;
+    opacity: 0.35;
+    box-shadow: none;
+    transition: opacity 0.1s, background 0.1s;
 }
 
-@keyframes uploadspin {
-    0% {
-        transform: rotate(0deg);
-    }
+.ib-loader-seg.active {
+    opacity: 1;
+    background: #ff99cc;
+    box-shadow: 0 0 2px 0 #99ccff;
+}
+
+.ib-loader-seg:nth-child(1) {
+    top: 0px;
+    left: 12px;
+}
+
+.ib-loader-seg:nth-child(2) {
+    top: 3px;
+    left: 19px;
+}
+
+.ib-loader-seg:nth-child(3) {
+    top: 8px;
+    left: 24px;
+}
+
+.ib-loader-seg:nth-child(4) {
+    top: 15px;
+    left: 27px;
+}
+
+.ib-loader-seg:nth-child(5) {
+    top: 22px;
+    left: 24px;
+}
+
+.ib-loader-seg:nth-child(6) {
+    top: 27px;
+    left: 19px;
+}
+
+.ib-loader-seg:nth-child(7) {
+    top: 30px;
+    left: 12px;
+}
+
+.ib-loader-seg:nth-child(8) {
+    top: 27px;
+    left: 5px;
+}
+
+.ib-loader-seg:nth-child(9) {
+    top: 22px;
+    left: 0px;
+}
+
+.ib-loader-seg:nth-child(10) {
+    top: 15px;
+    left: -3px;
+}
+
+.ib-loader-seg:nth-child(11) {
+    top: 8px;
+    left: 0px;
+}
 
-    100% {
-        transform: rotate(360deg);
-    }
+.ib-loader-seg:nth-child(12) {
+    top: 3px;
+    left: 5px;
 }
\ No newline at end of file