Adds spinner after submission

2 files changed, 51 insertions, 0 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index e0b1a1d..b90dade 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -226,3 +226,36 @@ header {
 /*  border-bottom: 10px solid #E4E5E7;*/
 /*  overflow: auto;*/
 /*}*/
+
+/* Spinner overlay styles */
+.spinner-overlay {
+    display: none; /* Initially hidden */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    z-index: 1000; /* On top of other content */
+    justify-content: center;
+    align-items: center;
+}
+
+/* Spinner animation */
+.spinner {
+    border: 6px solid #f3f3f3; /* Light gray */
+    border-top: 6px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html
index e0827c1..6261524 100644
--- a/alphabetlearning/templates/pages/home.html
+++ b/alphabetlearning/templates/pages/home.html
@@ -91,6 +91,9 @@
                         >
                     </p>
                 </form>
+                <div id="spinner-overlay" class="spinner-overlay">
+                    <div class="spinner"></div>
+                </div>
             </div>
             <div class="col-lg-12">
                 <h2 class="display-4 font-weight-bolder my-3">Bonus offer!</h2>
@@ -201,4 +204,19 @@
             launched in Spring 2025.
         </p>
     </div>
+{% block inline_javascript %}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.querySelector('form'); // Adjust this selector for your form
+    const spinnerOverlay = document.getElementById('spinner-overlay');
+
+    if (form) {
+        form.addEventListener('submit', () => {
+            spinnerOverlay.style.display = 'flex'; // Show the spinner overlay
+        });
+    }
+});
+</script>
+
+{% endblock inline_javascript %}
 {% endblock content %}