diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js
index 59f51fca3f..a71dcc5ffe 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js
+++ b/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: "@?"
             }
         };
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
index 871ae771d5..f197520eec 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
+++ b/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
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less
index 8c15084d55..c8fb742f5e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
index d8fb3b4d8f..b1e8ed1ecd 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
+++ b/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 {
-    stroke: @blue;
-}
+    &--primary {
+        stroke: @blue;
+    }
 
-.umb-progress-circle__highlight--secondary {
-    stroke: @purple;
-}
+    &--secondary {
+        stroke: @purple;
+    }
 
-.umb-progress-circle__highlight--success {
-    stroke: @green;
-}
+    &--success {
+        stroke: @green;
+    }
 
-.umb-progress-circle__highlight--warning {
-    stroke: @yellow;
-}
+    &--warning {
+        stroke: @yellow;
+    }
 
-.umb-progress-circle__highlight--danger {
-    stroke: @red;
+    &--danger {
+        stroke: @red;
+    }
 }
 
 // circle progressbar bg
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html
index 719a53e361..46b06455c6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html
+++ b/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>