Add loading bar

resources/base.scss

@@ -233,7 +233,7 @@ header {
     top: 0;
     left: 0;
     right: 0;
-    height: 48px;
+    height: $navbar_height;
 }
 
 nav {
@@ -377,7 +377,7 @@ hr {
 }
 
 #content {
-    margin: 48px auto 1em auto;
+    margin: $navbar_height auto 1em auto;
     padding-top: 1em;
 
     // Header
@@ -860,6 +860,16 @@ select {
     margin-bottom: 1em;
 }
 
+#loading-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 2px;
+    background-color: #993932;
+    width: 0;
+    z-index: 9999;
+}
+
 @media (max-width: 799px) {
     #user-links, .anon {
         padding-right: 0.5em;

resources/common.js

@@ -385,6 +385,12 @@ function onWindowReady() {
             showTooltip(e.trigger, fallbackMessage(e.action));
         });
     });
+    $('a').click(function() {
+        $("#loading-bar").show();
+        $("#loading-bar").animate({ width: "100%" }, 1500, function() {
+            $(this).hide();
+        });    
+    });
 }
 
 $(function() {
@@ -429,4 +435,5 @@ $(function() {
     $('html').click(function () {
         $nav_list.hide();
     });
+
 });

resources/vars.scss

@@ -10,3 +10,5 @@ $widget_border_radius: 4px;
 $table_header_rounding: 6px;
 
 $monospace-fonts: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+
+$navbar_height: 48px;

templates/base.html

@@ -316,6 +316,7 @@
       </div>
       <div id="nav-shadow"></div>
     </nav>
+    <div id="loading-bar"></div>
     {% if request.in_contest %}
       <div id="contest-info">
         <div id="contest-info-main">