From b533191bc9372878b8201cf1a670f4366ad325a5 Mon Sep 17 00:00:00 2001
From: Colin McLeod <colin@roaminsight.com>
Date: Mon, 10 Aug 2015 10:50:05 -0700
Subject: [PATCH] Adding loader for later use

---
 app/js/directives/directive-loader.js |  9 +++++++
 app/less/app.less                     |  1 +
 app/less/loader.less                  | 37 +++++++++++++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 app/js/directives/directive-loader.js
 create mode 100644 app/less/loader.less

diff --git a/app/js/directives/directive-loader.js b/app/js/directives/directive-loader.js
new file mode 100644
index 00000000..0d9c6ac7
--- /dev/null
+++ b/app/js/directives/directive-loader.js
@@ -0,0 +1,9 @@
+angular.module('app').directive('loader', ['$rootScope', function($r) {
+  return {
+    restrict: 'A',
+    link: function(scope, element) {
+      element.addClass('loader');
+      element.html('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 40 40" width="100%" height="100%"><!-- Outer Ring --><path d="m5,8l5,8l5,-8z" class="l1 d1" /><path d="m5,8l5,-8l5,8z" class="l1 d2" /><path d="m10,0l5,8l5,-8z" class="l1 d3" /><path d="m15,8l5,-8l5,8z" class="l1 d4" /><path d="m20,0l5,8l5,-8z" class="l1 d5" /><path d="m25,8l5,-8l5,8z" class="l1 d6" /><path d="m25,8l5,8l5,-8z" class="l1 d7" /><path d="m30,16l5,-8l5,8z" class="l1 d8" /><path d="m30,16l5,8l5,-8z" class="l1 d9" /><path d="m25,24l5,-8l5,8z" class="l1 d10" /><path d="m25,24l5,8l5,-8z" class="l1 d11" /><path d="m20,32l5,-8l5,8z" class="l1 d13" /><path d="m15,24l5,8l5,-8z" class="l1 d14" /><path d="m10,32l5,-8l5,8z" class="l1 d15" /><path d="m5,24l5,8l5,-8z" class="l1 d16" /><path d="m5,24l5,-8l5,8z" class="l1 d17" /><path d="m0,16l5,8l5,-8z" class="l1 d18" /><path d="m0,16l5,-8l5,8z" class="l1 d20" /><!-- Inner Ring --><path d="m10,16l5,-8l5,8z" class="l2 d0" /><path d="m15,8l5,8l5,-8z" class="l2 d3" /><path d="m20,16l5,-8l5,8z" class="l2 d6" /><path d="m20,16l5,8l5,-8z" class="l2 d9" /><path d="m15,24l5,-8l5,8z" class="l2 d12" /><path d="m10,16l5,8l5,-8z" class="l2 d15" /></svg>');
+    }
+ };
+}]);
diff --git a/app/less/app.less b/app/less/app.less
index cb27dbe3..840a8868 100755
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -19,6 +19,7 @@
 @import 'buttons';
 @import 'error';
 @import 'sortable';
+@import 'loader';
 
 html, body {
   height: 100%;
diff --git a/app/less/loader.less b/app/less/loader.less
new file mode 100644
index 00000000..b6fea933
--- /dev/null
+++ b/app/less/loader.less
@@ -0,0 +1,37 @@
+@keyframes hideshow {
+  0% { opacity: 0; }
+  10% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes inner {
+  0% { opacity: 0; }
+  10% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@animationTime: 750ms;
+@outerTriangles: 19;
+@animationDelay: @animationTime / @outerTriangles;
+
+.loader {
+
+  path {
+    stroke: #000;
+    stroke-width: 0;
+    opacity: 0;
+  }
+}
+
+.l1 { animation: hideshow @animationTime linear infinite; }
+.l2 { animation: inner @animationTime linear infinite; }
+
+.mixin-loop (@i) when (@i > 0) {
+  .d@{i} {
+    animation-delay: @i * @animationDelay;
+  }
+  .mixin-loop(@i - 1);
+}
+
+.mixin-loop(@outerTriangles);
+