Add new loader themes, tweak loader variables for theming

src/definitions/elements/loader.less

@@ -63,7 +63,7 @@
 
   border-radius: @circularRadius;
 
-  border-color: @loaderLineColor transparent transparent;
+  border-color: @shapeBorderColor;
   border-style: solid;
   border-width: @loaderLineWidth;
 
@@ -123,7 +123,7 @@
   border-color: @invertedLoaderFillColor;
 }
 .ui.dimmer .ui.loader:after {
-  border-top-color: @invertedLoaderLineColor;
+  border-color: @invertedShapeBorderColor;
 }
 
 /* White Dimmer (Inverted) */
@@ -134,7 +134,7 @@
   border-color: @loaderFillColor;
 }
 .ui.inverted.dimmer .ui.loader:after {
-  border-top-color: @loaderLineColor;
+  border-color: @shapeBorderColor;
 }
 
 /*******************************

src/themes/default/elements/loader.variables

@@ -3,6 +3,12 @@
 *******************************/
 
 /* Some global loader styles defined in site.variables */
+// @loaderSpeed
+// @loaderLineWidth
+// @loaderFillColor
+// @loaderLineColor
+// @invertedLoaderFillColor
+// @invertedLoaderLineColor
 
 /*-------------------
       Standard
@@ -11,30 +17,15 @@
 @loaderTopOffset: 50%;
 @loaderLeftOffset: 50%;
 
+@shapeBorderColor: @loaderLineColor transparent transparent;
+@invertedShapeBorderColor: @invertedLoaderLineColor transparent transparent;
+
 /*-------------------
         Types
 --------------------*/
 
-/* Exact Sizes (Avoids Rounding Errors) */
-@mini: 1.2857em;
-@small: 1.7142em;
-@medium: 2.2585em;
-@large: 4.5714em;
-
-@miniOffset: 0em 0em 0em -(@mini / 2);
-@smallOffset: 0em 0em 0em -(@small / 2);
-@mediumOffset: 0em 0em 0em -(@medium / 2);
-@largeOffset: 0em 0em 0em -(@large / 2);
-
-@textDistance: 0.7em;
-
-@miniFontSize: 0.7857em;
-@smallFontSize: 0.9285em;
-@mediumFontSize: 1em;
-@largeFontSize: 1.1428em;
-
-
 /* Text */
+@textDistance: 0.7em;
 @loaderTextColor: @textColor;
 @invertedLoaderTextColor: @invertedTextColor;
 
@@ -49,4 +40,21 @@
 --------------------*/
 
 @inlineVerticalAlign: middle;
-@inlineMargin: 0em;
+@inlineMargin: 0em;
+
+/* Exact Sizes (Avoids Rounding Errors) */
+@mini: 1.2857em;
+@small: 1.7142em;
+@medium: 2.2585em;
+@large: 4.5714em;
+
+@miniOffset: 0em 0em 0em -(@mini / 2);
+@smallOffset: 0em 0em 0em -(@small / 2);
+@mediumOffset: 0em 0em 0em -(@medium / 2);
+@largeOffset: 0em 0em 0em -(@large / 2);
+
+
+@miniFontSize: 0.7857em;
+@smallFontSize: 0.9285em;
+@mediumFontSize: 1em;
+@largeFontSize: 1.1428em;

src/themes/default/globals/site.variables

@@ -33,6 +33,8 @@
 @white            : #FFFFFF;
 
 /*---  Light Colors  ---*/
+
+@lightBlack:      : #CCCCCC;
 @lightBlue        : #54C8FF;
 @lightGreen       : #2ECC40;
 @lightOrange      : #FF851B;
@@ -42,8 +44,12 @@
 @lightTeal        : #6DFFFF;
 @lightYellow      : #FFE21F;
 
-@primaryColor     : @blue;
-@secondaryColor   : @black;
+/*---  Brand Colors  ---*/
+@primaryColor        : @blue;
+@secondaryColor      : @black;
+
+@lightPrimaryColor   : @lightBlue;
+@lightSecondaryColor : @lightBlack;
 
 /*-------------------
         Page
@@ -82,7 +88,7 @@
        Loader
 --------------------*/
 
-@loaderSpeed: 0.75s;
+@loaderSpeed: 0.6s;
 @loaderLineWidth: 0.3em;
 @loaderFillColor: rgba(0, 0, 0, 0.1);
 @loaderLineColor: @darkGrey;

src/themes/duo/elements/loader.overrides

@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/

src/themes/duo/elements/loader.variables

@@ -0,0 +1,6 @@
+/*******************************
+             Loader
+*******************************/
+
+@shapeBorderColor: @primaryColor @primaryColor @secondaryColor @secondaryColor;
+@invertedShapeBorderColor: @lightPrimaryColor @lightPrimaryColor @lightSecondaryColor @lightSecondaryColor;

src/themes/pulsar/elements/loader.overrides

@@ -0,0 +1,28 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+@keyframes loader-spin {
+  0% {
+    transform: rotate(0deg);
+    opacity: 0.3;
+  }
+  20% {
+    transform: rotate(360deg);
+  }
+  40% {
+    transform: rotate(740deg);
+    opacity: 1;
+  }
+  60% {
+    transform: rotate(1120deg);
+    opacity: 1;
+  }
+  80% {
+    transform: rotate(1440deg);
+  }
+  100% {
+    transform: rotate(1800deg);
+    opacity: 0.3;
+  }
+}

src/themes/pulsar/elements/loader.variables

@@ -0,0 +1,7 @@
+/*******************************
+             Loader
+*******************************/
+
+@loaderSpeed: 2s;
+@loaderLineColor: @primaryColor;
+@invertedLoaderLineColor: @lightPrimaryColor;