Add progress bar directive

app/assets/javascripts/angular/directives/components/progress-bar-directive.js

@@ -0,0 +1,24 @@
+// TODO move to UI components
+angular.module('openproject.uiComponents')
+
+.directive('progressBar', [function() {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: {
+      progress: '=',
+      width: '@',
+      legend: '@'
+    },
+    templateUrl: '/templates/components/progress_bar.html',
+    link: function(scope) {
+      // apply defaults
+      scope.progress = scope.progress || 0;
+      scope.width = scope.width || '100px';
+      scope.legend = scope.legend || '';
+
+      scope.scaleLength = 100;
+      scope.progress = Math.round(scope.progress);
+    }
+  };
+}]);

public/templates/components/progress_bar.html

@@ -0,0 +1,8 @@
+<table class="progress" ng-style="{width: width}">
+  <tbody>
+    <tr>
+      <td class="closed" ng-if="progress > 0" ng-style="{width: progress + '%'}"></td>
+      <td class="todo" ng-style="{width: (scaleLength - progress) + '%'}"></td>
+    </tr>
+  </tbody>
+</table>