feat(loader): add colored loader variants

Added colored and inverted colored loader variants

Closes #73

src/definitions/elements/loader.less

@@ -299,6 +299,71 @@
 }
 
 
+/*-------------------
+       Colors
+--------------------*/
+
+.ui.primary.loader:after {
+  border-color: @primaryColor transparent transparent;
+}
+
+.ui.secondary.loader:after {
+  border-color: @secondaryColor transparent transparent;
+}
+
+.ui.red.loader:after {
+  border-color: @red transparent transparent;
+}
+
+.ui.orange.loader:after {
+  border-color: @orange transparent transparent;
+}
+
+.ui.yellow.loader:after {
+  border-color: @yellow transparent transparent;
+}
+
+.ui.olive.loader:after {
+  border-color: @olive transparent transparent;
+}
+
+.ui.green.loader:after {
+  border-color: @green transparent transparent;
+}
+
+.ui.teal.loader:after {
+  border-color: @teal transparent transparent;
+}
+
+.ui.blue.loader:after {
+  border-color: @blue transparent transparent;
+}
+
+.ui.violet.loader:after {
+  border-color: @violet transparent transparent;
+}
+
+.ui.purple.loader:after {
+  border-color: @purple transparent transparent;
+}
+
+.ui.pink.loader:after {
+  border-color: @pink transparent transparent;
+}
+
+.ui.brown.loader:after {
+  border-color: @brown transparent transparent;
+}
+
+.ui.grey.loader:after {
+  border-color: @grey transparent transparent;
+}
+
+.ui.black.loader:after {
+  border-color: @black transparent transparent;
+}
+
+
 /*-------------------
        Inverted
 --------------------*/
@@ -313,6 +378,67 @@
   border-top-color: @invertedLoaderLineColor;
 }
 
+/* Colors */
+.ui.inverted.primary.loader:after {
+  border-color: @lightPrimaryColor transparent transparent;
+}
+
+.ui.inverted.secondary.loader:after {
+  border-color: @lightSecondaryColor transparent transparent;
+}
+
+.ui.inverted.red.loader:after {
+  border-color: @lightRed transparent transparent;
+}
+
+.ui.inverted.orange.loader:after {
+  border-color: @lightOrange transparent transparent;
+}
+
+.ui.inverted.yellow.loader:after {
+  border-color: @lightYellow transparent transparent;
+}
+
+.ui.inverted.olive.loader:after {
+  border-color: @lightOlive transparent transparent;
+}
+
+.ui.inverted.green.loader:after {
+  border-color: @lightGreen transparent transparent;
+}
+
+.ui.inverted.teal.loader:after {
+  border-color: @lightTeal transparent transparent;
+}
+
+.ui.inverted.blue.loader:after {
+  border-color: @lightBlue transparent transparent;
+}
+
+.ui.inverted.violet.loader:after {
+  border-color: @lightViolet transparent transparent;
+}
+
+.ui.inverted.purple.loader:after {
+  border-color: @lightPurple transparent transparent;
+}
+
+.ui.inverted.pink.loader:after {
+  border-color: @lightPink transparent transparent;
+}
+
+.ui.inverted.brown.loader:after {
+  border-color: @lightBrown transparent transparent;
+}
+
+.ui.inverted.grey.loader:after {
+  border-color: @lightGrey transparent transparent;
+}
+
+.ui.inverted.black.loader:after {
+  border-color: @lightBlack transparent transparent;
+}
+
 /*-------------------
        Inline
 --------------------*/