Feat UI - Added uploading animation

static/css/style.css

@@ -31,3 +31,111 @@ body {
 .navbar {
   margin-bottom: 20px !important;
 }
+.hide {
+  display: none;
+}
+.button {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 12.5rem;
+  margin: 0;
+  padding: 1.5rem 3.125rem;
+  background-color: #3498db;
+  border: none;
+  border-radius: 0.3125rem;
+  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);
+  color: white;
+  font-weight: 400;
+  overflow: hidden;
+}
+.button:before {
+  position: absolute;
+  content: "";
+  bottom: 0;
+  left: 0;
+  width: 0%;
+  height: 100%;
+  background-color: #54d98c;
+}
+.button span {
+  position: absolute;
+  line-height: 0;
+}
+.button span i {
+  transform-origin: center center;
+}
+.button span:nth-of-type(1) {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.button span:nth-of-type(2) {
+  top: 100%;
+  transform: translateY(0%);
+  font-size: 24px;
+}
+.button span:nth-of-type(3) {
+  display: none;
+}
+.active {
+  background-color: #2ecc71;
+}
+.active:before {
+  width: 100%;
+  transition: width 30s linear !important;
+}
+.active span:nth-of-type(1) {
+  top: -100%;
+  transform: translateY(-50%);
+}
+.active span:nth-of-type(2) {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.active span:nth-of-type(2) i {
+  animation: loading 10000ms linear infinite !important;
+}
+.active span:nth-of-type(3) {
+  display: none;
+}
+.finished {
+  background-color: #54d98c;
+}
+.finished .submit {
+  display: none;
+}
+.finished .loading {
+  display: none;
+}
+.finished .check {
+  display: block !important;
+  font-size: 24px;
+  animation: scale 0.5s linear;
+}
+.finished .check i {
+  transform-origin: center center;
+}
+@keyframes loading {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes scale {
+  0% {
+    transform: scale(10);
+  }
+  50% {
+    transform: scale(0.2);
+  }
+  70% {
+    transform: scale(1.2);
+  }
+  90% {
+    transform: scale(0.7);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

templates/index.html

@@ -12,6 +12,7 @@
       type="text/css"
       href="{{ url_for('static',filename='css/style.css') }}"
     />
+    <script src="https://kit.fontawesome.com/22be60108b.js" crossorigin="anonymous"></script>
     <title>MLH Quizzet</title>
   </head>
 
@@ -74,13 +75,28 @@
               }
             };
           </script>
-          <input
+          <button class="button has-text-centered is-large is-fullwidth is-dark">
-            type="submit"
+            <span class="submit has-text-centered" type="submit"
-            name="upload file"
+            name="upload file">Submit</span>
-            class="button has-text-centered is-large is-fullwidth is-dark"
+            <span class="loading"><i class="fa fa-refresh"></i></span>
-          />
+            <span class="check"><i class="fa fa-check"></i></span>
+          </button>
         </form>
       </div>
     </main>
+    <script>const button = document.querySelector('.button');
+      const submit = document.querySelector('.submit');
+
+      function toggleClass() {
+        this.classList.toggle('active');
+      }
+
+      function addClass() {
+        this.classList.add('finished');
+      }
+
+      button.addEventListener('click', toggleClass);
+      button.addEventListener('transitionend', toggleClass);
+      button.addEventListener('transitionend', addClass);</script>
   </body>
 </html>