Scaled down stripes and made loader color customisable

static/cranefly/css/cranefly.css

@@ -729,7 +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}
+#ajax-loader{display:none;position:fixed;top:0;height:auto;width:100%;z-index:1051}#ajax-loader .bar{background:#cf402e;background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255,255,255,0.2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,0.2)), color-stop(.75, rgba(255,255,255,0.2)), color-stop(.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);-webkit-background-size:15px 15px;-moz-background-size:15px 15px;background-size:15px 15px;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/loader.less

@@ -10,6 +10,30 @@
 	z-index: @zindexModal + 1;
 
 	.bar {
+		background: @loaderColor;
+		background-image: -webkit-gradient(linear, 0 0, 100% 100%,
+		            color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
+		            color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
+		            color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
+		            to(transparent));
+		background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+		          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+		          transparent 75%, transparent);
+		background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+		          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+		          transparent 75%, transparent);
+		background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+		          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+		          transparent 75%, transparent);
+		background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+		          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+		          transparent 75%, transparent);
+		background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+		          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+		          transparent 75%, transparent);
+		-webkit-background-size: 15px 15px;
+		-moz-background-size: 15px 15px;
+		background-size: 15px 15px;
 		height: @loaderHeight;
 	}
 }

templates/cranefly/layout.html

@@ -2,8 +2,8 @@
 {% 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 id="ajax-loader" class="progress progress-striped active">
+  <div class="bar" style="width: 100%;"></div>
 </div>
 <div id="wrap">
   <div class="navbar navbar-header navbar-static-top">