commit 4326332ba7c60de2b9a15e49bf8638a045ef6612 Author: cypherpunks <cypherpunks@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&li..."; 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(); }