added progress spinner to trending page

RocketMan · Dec 12, 2024 · f97848c · f97848c
1 parent 8d68272
commit f97848c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/css/trending.css b/css/trending.css
@@ -51,3 +51,42 @@ div.jqcloud {
 }
 
 div.jqcloud span { padding: 4px; }
+
+/* loading */
+
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.loading {
+  position: absolute;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+}
+.loading div {
+  width: 33%;
+  height: 33%;
+  max-width: 33%;
+  max-height: 33%;
+}
+.loading div::after {
+  content: "";
+  margin: -4px;
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-style: solid;
+  border-width: 6px;
+  border-color: #ccc transparent transparent #ccc;
+  border-radius: 100%;
+  animation: 1s linear 0s infinite normal none running loading;
+}
diff --git a/js/trending.js b/js/trending.js
@@ -41,6 +41,8 @@ function reposition() {
         .css('opacity', 1)
         .parent().css('overflow-x','clip');
 
+    $(".loading").remove();
+
     loading = false;
 }
 
@@ -52,6 +54,12 @@ function loadCloud() {
         if(Math.abs(lastsize - width) < 10)
             return;
 
+        if($(".loading").length == 0) {
+            $(".content").append($("<div>", {
+                class: "loading"
+            }).append($("<div>")));
+        }
+
         loading = true;
         lastsize = width;
         $("#cloud").css('opacity', 0).empty().jQCloud(trending, {
@@ -71,6 +79,10 @@ $().ready(function() {
         return;
     }
 
+    $(".content").append($("<div>", {
+        class: "loading"
+    }).append($("<div>")));
+
     $.ajax({
         dataType: 'json',
         type: 'GET',