add umb-progress-bar component

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

@@ -0,0 +1,41 @@
+
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbProgressBar
+@restrict E
+@scope
+
+@description
+Use this directive to generate a progress bar.
+
+<h3>Markup example</h3>
+<pre>
+    <umb-progress-bar
+        percentage="60">
+    </umb-progress-bar>
+</pre>
+
+@param {number} percentage (<code>attribute</code>): The progress in percentage.
+**/
+
+(function() {
+    'use strict';
+
+    function ProgressBarDirective() {
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/umb-progress-bar.html',
+            scope: {
+                percentage: "@"
+            }
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbProgressBar', ProgressBarDirective);
+
+})();

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -112,6 +112,7 @@
 @import "components/umb-package-local-install.less";
 @import "components/umb-lightbox.less";
 @import "components/umb-avatar.less";
+@import "components/umb-progress-bar.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";

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

@@ -0,0 +1,20 @@
+.umb-progress-bar {
+    background: @grayLight;
+    width: 100%;
+    display: block;
+    height: 10px;
+    border-radius: 10px;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+}
+
+.umb-progress-bar__progress {
+    background: #50C878;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    border-radius: 10px;
+}

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

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