Stream line <umb-progress-bar> and <umb-progress-circle>

src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js

@@ -17,6 +17,7 @@ Use this directive to generate a progress bar.
 
 @param {number} percentage (<code>attribute</code>): The progress in percentage.
 @param {string} size (<code>attribute</code>): The size (s, m).
+@param {string} color (<code>attribute</code>): The color of the progress (primary, secondary, success, warning, danger). Success by default.
 
 **/
 
@@ -31,7 +32,8 @@ Use this directive to generate a progress bar.
             templateUrl: 'views/components/umb-progress-bar.html',
             scope: {
                 percentage: "@",
-                size: "@?"
+                size: "@?",
+                color: "@?"
             }
         };
 

src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js

@@ -20,8 +20,8 @@ Use this directive to render a circular progressbar.
 	</div>
 </pre>
 
-@param {string} size (<code>attribute</code>): This parameter defines the width and the height of the circle in pixels.
 @param {string} percentage (<code>attribute</code>): Takes a number between 0 and 100 and applies it to the circle's highlight length.
+@param {string} size (<code>attribute</code>): This parameter defines the width and the height of the circle in pixels.
 @param {string} color (<code>attribute</code>): The color of the highlight (primary, secondary, success, warning, danger). Success by default. 
 **/
 
@@ -72,9 +72,9 @@ Use this directive to render a circular progressbar.
             replace: true,
             templateUrl: 'views/components/umb-progress-circle.html',
             scope: {
-                size: "@?",
                 percentage: "@",
-                color: "@"
+                size: "@?",
+                color: "@?"
             },
             link: link
 

src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less

@@ -17,6 +17,26 @@
     bottom: 0;
     width: 100%;
     border-radius: 10px;
+
+    &--primary {
+        background: @blue;
+    }
+
+    &--secondary {
+        background: @purple;
+    }
+
+    &--success {
+        background: @green;
+    }
+
+    &--warning {
+        background: @yellow;
+    }
+
+    &--danger {
+        background: @red;
+    }
 }
 
 .umb-progress-bar--s {
@@ -27,4 +47,4 @@
 .umb-progress-bar--m {
     height: 10px;
     border-radius: 10px;
-}
+}

src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less

@@ -11,26 +11,26 @@
 // circle highlight on progressbar
 .umb-progress-circle__highlight {
     stroke: @green;
-}
 
-.umb-progress-circle__highlight--primary {
+    &--primary {
-    stroke: @blue;
+        stroke: @blue;
-}
+    }
 
-.umb-progress-circle__highlight--secondary {
+    &--secondary {
-    stroke: @purple;
+        stroke: @purple;
-}
+    }
 
-.umb-progress-circle__highlight--success {
+    &--success {
-    stroke: @green;
+        stroke: @green;
-}
+    }
 
-.umb-progress-circle__highlight--warning {
+    &--warning {
-    stroke: @yellow;
+        stroke: @yellow;
-}
+    }
 
-.umb-progress-circle__highlight--danger {
+    &--danger {
-    stroke: @red;
+        stroke: @red;
+    }
 }
 
 // circle progressbar bg

src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html

@@ -1,3 +1,3 @@
 <span class="umb-progress-bar umb-progress-bar--{{size}}">
-    <span class="umb-progress-bar__progress" style="width: {{percentage}}%"></span>
+    <span class="umb-progress-bar__progress umb-progress-bar__progress--{{color}}" ng-style="{'width': percentage + '%'}"></span>
 </span>