[tor-commits] [atlas/master] Replace the loading icon with a progress bar

[irl at torproject.org]

commit 4326332ba7c60de2b9a15e49bf8638a045ef6612
Author: cypherpunks <cypherpunks at torproject.org>
Date:   Fri Mar 3 11:45:29 2017 +0000

    Replace the loading icon with a progress bar
    
    The progress bar is built with CSS which scales better than an animated
    loading GIF.
    
    Closes #21623.
---
 css/style.css        |  12 +++++++-----
 img/loader.gif       | Bin 1928 -> 0 bytes
 img/onion-loader.gif | Bin 22695 -> 0 bytes
 img/tor-loading.gif  | Bin 142883 -> 0 bytes
 index.html           |   4 ++--
 js/router.js         |  24 ++++++++++++------------
 6 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/css/style.css b/css/style.css
index 46591f9..f368dbc 100644
--- a/css/style.css
+++ b/css/style.css
@@ -38,11 +38,13 @@
 
 }
 
-#loading {
-    width: 24px;
-    margin: 0 auto;
-    padding-top: 50px;
-    padding-bottom: 100px;
+.progress {
+    width: 50%;
+    margin: 100px auto;
+}
+
+.progress .bar {
+    width: 50%;
 }
 
 .container #content {
diff --git a/img/loader.gif b/img/loader.gif
deleted file mode 100644
index 521a291..0000000
Binary files a/img/loader.gif and /dev/null differ
diff --git a/img/onion-loader.gif b/img/onion-loader.gif
deleted file mode 100644
index 4527225..0000000
Binary files a/img/onion-loader.gif and /dev/null differ
diff --git a/img/tor-loading.gif b/img/tor-loading.gif
deleted file mode 100644
index 0111fb8..0000000
Binary files a/img/tor-loading.gif and /dev/null differ
diff --git a/index.html b/index.html
index 9ba5f35..47d635a 100644
--- a/index.html
+++ b/index.html
@@ -57,8 +57,8 @@
     </div>
 
     <div class="container">
-      <div id="loading" style="display: none">
-        <img src="img/loader.gif" alt="Loading content" />
+      <div class="progress progress-info progress-striped active">
+        <div class="bar"></div>
       </div>
       <div id="content">
         <noscript>
diff --git a/js/router.js b/js/router.js
index 1a54f2d..080a750 100644
--- a/js/router.js
+++ b/js/router.js
@@ -34,19 +34,19 @@ define([
         $("#about").removeClass("active");
 
         $("#content").hide();
-        $("#loading").show();
+        $(".progress").show();
 
         mainDetailsView.model.fingerprint = this.hashFingerprint(fingerprint);
         mainDetailsView.model.lookup({
             success: function(relay) {
     	        mainDetailsView.render();
-                $("#loading").hide();
+                $(".progress").hide();
                 $("#content").show();
 
             },
             error: function() {
                 mainDetailsView.error();
-                $("#loading").hide();
+                $(".progress").hide();
                 $("#content").show();
             }
         });
@@ -58,13 +58,13 @@ define([
         $("#about").removeClass("active");
 
         $("#content").hide();
-        $("#loading").show();
+        $(".progress").show();
 
         $("#nav-search").val(query);
         if (query == "") {
 	    doSearchView.error = 5;
             doSearchView.renderError();
-            $("#loading").hide();
+            $(".progress").hide();
             $("#content").show();
         } else {
             doSearchView.collection.url =
@@ -83,14 +83,14 @@ define([
 		    doSearchView.error = err;
                     doSearchView.render(query);
 		    $("#search-title").text(query);
-                    $("#loading").hide();
+                    $(".progress").hide();
                     $("#content").show();
                 },
 
                 error: function(err){
 		    doSearchView.error = err;
 		    doSearchView.renderError();
-                    $("#loading").hide();
+                    $(".progress").hide();
                     $("#content").show();
                 }
             });
@@ -101,7 +101,7 @@ define([
         $("#about").removeClass("active");
 
         $("#content").hide();
-        $("#loading").show();
+        $(".progress").show();
 
         doSearchView.collection.url = "https://onionoo.torproject.org/summary?type=relay&order=-consensus_weight&limit=10&running=true";
             doSearchView.collection.lookup({
@@ -109,14 +109,14 @@ define([
                     doSearchView.relays = doSearchView.collection.models;
                     doSearchView.render("");
 		    $("#search-title").text("Top 10 Relays by Consensus Weight");
-                    $("#loading").hide();
+                    $(".progress").hide();
                     $("#content").show();
                 },
 
                 error: function(erno){
                     doSearchView.error = erno;
                     doSearchView.renderError();
-                    $("#loading").hide();
+                    $(".progress").hide();
                     $("#content").show();
                 }
             });
@@ -128,7 +128,7 @@ define([
 
     	aboutView.render();
 
-        $("#loading").hide();
+        $(".progress").hide();
         $("#content").show();
     },
 
@@ -139,7 +139,7 @@ define([
 
         mainSearchView.render();
 
-        $("#loading").hide();
+        $(".progress").hide();
         $("#content").show();
     }