add loader to record RD

thecodingaviator · Jul 31, 2023 · 779945c · 779945c
1 parent 4009fe3
commit 779945c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 0 deletions.
diff --git a/loader.php b/loader.php
@@ -0,0 +1,12 @@
+<div class="loader">
+  <div class="loader-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" height="1em"
+      viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+      <path
+        d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />
+    </svg>
+  </div>
+  <h1>
+    Processing...
+  </h1>
+</div>
diff --git a/record_RD.php b/record_RD.php
@@ -169,6 +169,7 @@ function fieldsToDataMasterSQL($conn, $post_data, $user_id)
     <p> </p>
   </div>
   <div class="wrapper">
+    <?php include "loader.php"; ?>
     <?php include "navbar.php"; ?>
     <div class="content-wrapper">
       <div class="content">

diff --git a/utils/css/dashboard-common.css b/utils/css/dashboard-common.css
@@ -109,3 +109,44 @@ input[type=text]:read-only {
   color: #ff0000;           /* Text color for error messages */
   font-weight: bold;        /* Bold font weight */
 }
+
+/* Loader Styles */
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: none;
+}
+
+@keyframes rotate {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* Loader Image Styles */
+.loader svg {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  color: #228cd8;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: rotate 2s linear infinite;
+}
+
+.loader h1 {
+  position: absolute;
+  top: 60%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--global-black);
+}
diff --git a/utils/js/submit.js b/utils/js/submit.js
@@ -2,6 +2,8 @@ function handleFileUpload() {
   var form = document.getElementById('upload_form');
   var formData = new FormData(form);
 
+  document.getElementsByClassName("loader")[0].style.display = "block";
+
   //get form data submitted and give it to upload.php
   fetch('/upload.php', {
   method: 'POST',
@@ -14,6 +16,9 @@ function handleFileUpload() {
     //redirect to confirm page only after upload.php has finished
 
     window.location.href = "confirmation.php"
+
+    // remove loader
+    document.getElementsByClassName("loader")[0].style.display = "none";
   })
   .catch(error => {
     console.error('Error:', error);