diff --git a/static/css/style.css b/static/css/style.css
index 6391aba..1ab7f0b 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -76,6 +76,22 @@ body {
 
 .notesBar .loadingStuff {
     border: none;
+
+    background:
+        linear-gradient(0.25turn, transparent, #fff, transparent),
+        linear-gradient(#eee, #eee),
+        radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
+        linear-gradient(#eee, #eee);
+    background-repeat: no-repeat;
+    background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
+    background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
+    animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+    to {
+        background-position: 315px 0, 0 0, 0 190px, 50px 195px;
+    }
 }
 
 .notesBar .selected {
diff --git a/static/js/main.js b/static/js/main.js
index a37971d..03d168c 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -217,7 +217,6 @@ function updateNotes() {
     })
         .then((response) => response)
         .then((response) => {
-            document.querySelectorAll(".loadingStuff").forEach((el) => el.remove());
             async function doStuff() {
                 document.querySelectorAll(".noteButton").forEach((el) => el.remove());
                 noteBox.readOnly = true
@@ -257,6 +256,7 @@ function updateNotes() {
                         }
                     });
                 }
+                document.querySelectorAll(".loadingStuff").forEach((el) => el.remove());
             }
             doStuff()
         });