diff --git a/static/loading.gif b/static/loading.gif
deleted file mode 100644
index 2a6395f..0000000
Binary files a/static/loading.gif and /dev/null differ
diff --git a/static/loading.webm b/static/loading.webm
new file mode 100644
index 0000000..0c0186a
Binary files /dev/null and b/static/loading.webm differ
diff --git a/templates/admin.html b/templates/admin.html
index 84051a3..c5f3314 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -250,9 +250,6 @@
         integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
         crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
-            style="height:100%;" />
-    </div>
     {% include 'footer.html' %}
     <script>
         var homerooms = {};
diff --git a/templates/chgPassword.html b/templates/chgPassword.html
index 8a412c1..fb52536 100644
--- a/templates/chgPassword.html
+++ b/templates/chgPassword.html
@@ -86,9 +86,6 @@
             <div class="col"></div>
         </div>
     </div>
-    <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
-            style="height:100%;" />
-    </div>
     {% include 'footer.html' %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="/static/pagejs/chgPassword.js"></script>
diff --git a/templates/footer.html b/templates/footer.html
index 7068e2e..939204a 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,3 +1,8 @@
+<div id="loading" width="100%" style="display: none; text-align: center;">
+    <video id="loading" oncontextmenu="return false;" height="100%" loop autoplay muted>
+        <source src="/static/loading.webm" type="video/webm" height="100%">
+    </video>
+</div>
 <footer>
     <hr>
     <p style="text-align: center;">&copy; 2021 Attendance (β) | Made by <a target="_blank"
diff --git a/templates/forgotPassword.html b/templates/forgotPassword.html
index 958b12d..d49cc5c 100644
--- a/templates/forgotPassword.html
+++ b/templates/forgotPassword.html
@@ -51,9 +51,6 @@
             <div class="col"></div>
         </div>
     </div>
-    <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
-            style="height:100%;" />
-    </div>
     {% include 'footer.html' %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="/static/pagejs/forgotPassword.js"></script>
diff --git a/templates/group_teach.html b/templates/group_teach.html
index e295cf0..324e666 100644
--- a/templates/group_teach.html
+++ b/templates/group_teach.html
@@ -146,9 +146,6 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
         crossorigin="anonymous"></script>
-    <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
-            style="height:100%;" />
-    </div>
     {% include 'footer.html' %}
     <script src="/static/pagejs/group_teach.js"></script>
     <script src="/static/time.js"></script>
diff --git a/templates/homeroom.html b/templates/homeroom.html
index 3b02957..0450e6b 100644
--- a/templates/homeroom.html
+++ b/templates/homeroom.html
@@ -231,9 +231,6 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
         crossorigin="anonymous"></script>
-    <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
-            style="height:100%;" />
-    </div>
     {% include 'footer.html' %}
     <script>
         var periodData = {}
diff --git a/templates/login.html b/templates/login.html
index 0f576b0..8c1d93d 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -66,9 +66,6 @@
             <div class="col"></div>
         </div>
     </div>
-    <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
-            style="height:100%;" />
-    </div>
     {% include 'footer.html' %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="/static/pagejs/login.js"></script>
diff --git a/templates/selSubUser.html b/templates/selSubUser.html
index df8e074..a5d8c86 100644
--- a/templates/selSubUser.html
+++ b/templates/selSubUser.html
@@ -42,9 +42,6 @@
             </select>
         </form>
     </div>
-    <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
-            style="height:100%;" />
-    </div>
     {% include 'footer.html' %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="/static/pagejs/selSubUser.js"></script>
diff --git a/templates/temp.html b/templates/temp.html
new file mode 100644
index 0000000..fff95c6
--- /dev/null
+++ b/templates/temp.html
@@ -0,0 +1,16 @@
+<video id="loading" oncontextmenu="return false;" width="100%" height="100%" loop autoplay muted style="display: none;">
+    <source src="/static/loading.webm" type="video/webm">
+</video>
+<footer>
+    <hr>
+    <p style="text-align: center;">&copy; 2021 Attendance (β) | Made by <a target="_blank"
+            href="https://github.com/aaronleetw">Aaron Lee 李翊愷</a> and Mr. Raymond Tsai 蔡瑋倫老師
+        <br>for <a target="_blank" href="https://www.fhjh.tp.edu.tw">Taipei Fuhsing Private School</a>
+    </p>
+</footer>
+
+<script>
+    function loadingAnimation() {
+        $('#loading').show();
+    }
+</script>
\ No newline at end of file
diff --git a/templates/uploadcsv.html b/templates/uploadcsv.html
index 0ec94d1..4a61b32 100644
--- a/templates/uploadcsv.html
+++ b/templates/uploadcsv.html
@@ -53,9 +53,6 @@
             <div class="col"></div>
         </div>
     </div>
-    <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
-            style="height:100%;" />
-    </div>
     {% include 'footer.html' %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="/static/pagejs/uploadcsv.js"></script>
diff --git a/templates/verifiedChgPassword.html b/templates/verifiedChgPassword.html
index af415de..cd559fc 100644
--- a/templates/verifiedChgPassword.html
+++ b/templates/verifiedChgPassword.html
@@ -56,9 +56,6 @@
             <div class="col"></div>
         </div>
     </div>
-    <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
-            style="height:100%;" />
-    </div>
     {% include 'footer.html' %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="/static/pagejs/verifiedChgPassword.js"></script>