Added Ajax Loader

static/cranefly/css/cranefly.css

@@ -729,6 +729,7 @@ footer{background-color:#eee;border-top:1px solid #dadada;height:90px;padding:11
 footer .container .credits p{margin-bottom:0;color:#555;font-size:90%}footer .container .credits p a:link,footer .container .credits p a:active,footer .container .credits p a:visited,footer .container .credits p a:hover{color:#555}
 ::selection{background:#f89406;color:#fff}
 ::-moz-selection{background:#f89406;color:#fff}
+#ajax-loader{display:none;position:fixed;top:0;height:auto;width:100%;z-index:1051}#ajax-loader .bar{height:6px}
 .navbar-header .navbar-inner{background:none;background-color:#f3f3f3;border-bottom:1px solid #dfdfdf;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.navbar-header .navbar-inner .container{background:url("../img/logo.png");background-position:left center;background-repeat:no-repeat}
 .navbar-header .navbar-inner .brand{margin-left:10px;text-shadow:none}.navbar-header .navbar-inner .brand:link,.navbar-header .navbar-inner .brand:active,.navbar-header .navbar-inner .brand:visited,.navbar-header .navbar-inner .brand:hover{color:#c24a3b;font-size:200%}.navbar-header .navbar-inner .brand:link span,.navbar-header .navbar-inner .brand:active span,.navbar-header .navbar-inner .brand:visited span,.navbar-header .navbar-inner .brand:hover span{color:#c0c0c0}
 .navbar-header .navbar-inner .navbar-search-form{height:30px;width:314px;margin-top:9px;overflow:visible;position:relative}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border{background-color:#fff;border:1px solid #c5c5c5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:absolute;z-index:1030}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border .navbar-search-text{border:1px solid #c5c5c5;border-radius:3px;margin:-1px;padding:1px 0;color:#333}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border .navbar-search-text>input{border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background:none;margin:0;width:300px}

static/cranefly/css/cranefly.less

@@ -66,6 +66,7 @@
 // Cranefly theme
 @import "cranefly/header.less";
 @import "cranefly/scaffolding.less";
+@import "cranefly/loader.less";
 @import "cranefly/navbar.less";
 @import "cranefly/midman.less";
 @import "cranefly/breadcrumbs.less";

static/cranefly/css/cranefly/loader.less

@@ -0,0 +1,15 @@
+// Ajax Loader Bar
+// -------------------------
+
+#ajax-loader {
+	display: none;
+	position: fixed;
+	top: 0px;
+	height: auto;
+	width: 100%;
+	z-index: @zindexModal + 1;
+
+	.bar {
+		height: @loaderHeight;
+	}
+}

static/cranefly/css/variables.less

@@ -171,6 +171,10 @@
 @dropdownLinkBackgroundActive:  @linkColor;
 @dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
 
+// Ajax Loader
+// -------------------------
+@loaderHeight:                  6px;
+@loaderColor:                   @red;
 
 
 // COMPONENT VARIABLES

static/cranefly/js/cranefly.js

@@ -31,6 +31,17 @@ $(function () {
     e.stopPropagation()
   });
 
+  // Ajax Loader
+  var ajax_loader = $('#ajax-loader');
+  $("body").on({
+    ajaxStart: function() {
+      ajax_loader.fadeIn();
+    },
+    ajaxStop: function() {
+      ajax_loader.fadeOut();
+    }
+  });
+
   // Fancy user nav activation
   $('#fancy-user-nav').show();
 

templates/cranefly/layout.html

@@ -2,6 +2,9 @@
 {% from "cranefly/macros.html" import messages_list %}
 
 {% block body %}
+<div id="ajax-loader" class="progress progress-striped active ajax-in-progress">
+  <div class="bar bar-danger" style="width: 100%;"></div>
+</div>
 <div id="wrap">
   <div class="navbar navbar-header navbar-static-top">
     <div class="navbar-inner">