Category: Also show loading indicator at end of lists

src/CategoryOverpass.js

@@ -56,6 +56,11 @@ function CategoryOverpass (id, data) {
   p.innerHTML = '<i class="fa fa-spinner fa-pulse fa-fw"></i><span class="sr-only">Loading...</span>'
   this.dom.appendChild(p)
 
+  var p = document.createElement('div')
+  p.className = 'loadingIndicator2'
+  p.innerHTML = '<div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div>'
+  this.dom.appendChild(p)
+
   this.domStatus = document.createElement('div')
   this.domStatus.className = 'status'
 

style.css

@@ -98,6 +98,58 @@ body {
   padding-top: 2px;
   display: block;
 }
+
+#content .category > .loadingIndicator2 {
+  display: none;
+}
+
+/* Source: http://tobiasahlin.com/spinkit/ */
+#content .category.loading > .loadingIndicator2 {
+  width: 100%;
+  text-align: left;
+  display: block;
+  background: #efefef;
+  padding-left: 40px;
+}
+
+#content .category.loading > .loadingIndicator2 > div {
+  width: 9px;
+  height: 9px;
+  margin-right: 9px;
+  background-color: #333;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+#content .category.loading > .loadingIndicator2 .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+#content .category.loading > .loadingIndicator2 .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}
+
 #content .category header {
   padding-top: 3px;
   border-bottom: 1px dotted #999;