progress bars

src/app/app.js

@@ -14,6 +14,7 @@ var blurAdminApp = angular.module('BlurAdmin', [
   'BlurAdmin.formLayoutsPage',
   'BlurAdmin.iconsPage',
   'BlurAdmin.mapsPage',
+  'BlurAdmin.progressBarsPage',
   'BlurAdmin.modalsPage',
   'BlurAdmin.profilePage',
   'BlurAdmin.tablesPage',

src/app/components/contentTop/contentTop.js

@@ -16,6 +16,7 @@ blurAdminApp.directive('contentTop', ['$location', function ($location) {
         '/charts': 'Charts',
         '/grid': 'Grid',
         '/alerts': 'Alerts',
+        '/progressBars': 'Progress Bars',
         '/icons': 'Icons',
         '/login': 'Authentication',
         '/maps': 'Maps',

src/app/components/sidebar/sidebar.js

@@ -65,6 +65,10 @@ blurAdminApp.directive('sidebar', function () {
             {
               title: 'Alerts',
               root: '#/alerts'
+            },
+            {
+              title: 'Progress Bars',
+              root: '#/progressBars'
             }
           ]
         },

src/app/pages/progressBars/progressBars.html

@@ -0,0 +1 @@
+<widgets ng-model="widgetBlocks"></widgets>

src/app/pages/progressBars/progressBars.js

@@ -0,0 +1,48 @@
+'use strict';
+
+angular.module('BlurAdmin.progressBarsPage', ['ngRoute'])
+
+  .config(['$routeProvider', function ($routeProvider) {
+    $routeProvider.when('/progressBars', {
+      templateUrl: 'app/pages/progressBars/progressBars.html',
+      controller: 'progressBarsPageCtrl'
+    });
+  }])
+  .controller('progressBarsPageCtrl', ['$scope', function ($scope) {
+    $scope.widgetBlocks = [
+      {
+        widgets: [
+          [
+            {
+              title: "Basic",
+              url: 'app/pages/progressBars/widgets/basic.html'
+            },
+            {
+              title: "Striped",
+              url: 'app/pages/progressBars/widgets/striped.html'
+            }
+          ],
+          [
+            {
+              title: "With label",
+              url: 'app/pages/progressBars/widgets/label.html'
+            },
+            {
+              title: "Animated",
+              url: 'app/pages/progressBars/widgets/animated.html'
+            }
+          ]
+        ]
+      }, {
+        widgets: [
+          [
+            {
+              title: "Stacked",
+              url: 'app/pages/progressBars/widgets/stacked.html'
+            }
+          ]
+        ]
+      }
+    ];
+  }]);
+

src/app/pages/progressBars/widgets/animated.html

@@ -0,0 +1,20 @@
+<div class="progress">
+  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+    <span class="sr-only">40% Complete (success)</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    <span class="sr-only">20% Complete</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+    <span class="sr-only">60% Complete (warning)</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+    <span class="sr-only">80% Complete (danger)</span>
+  </div>
+</div>

src/app/pages/progressBars/widgets/basic.html

@@ -0,0 +1,20 @@
+<div class="progress">
+  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+    <span class="sr-only">40% Complete (success)</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    <span class="sr-only">20% Complete</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+    <span class="sr-only">60% Complete (warning)</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+    <span class="sr-only">80% Complete (danger)</span>
+  </div>
+</div>

src/app/pages/progressBars/widgets/label.html

@@ -0,0 +1,20 @@
+<div class="progress">
+  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+    40% Complete (success)
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    20% Complete
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+    60% Complete (warning)
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+    80% Complete (danger)
+  </div>
+</div>

src/app/pages/progressBars/widgets/stacked.html

@@ -0,0 +1,14 @@
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 35%">
+    <span class="sr-only">35% Complete (success)</span>
+  </div>
+  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
+    <span class="sr-only">20% Complete (warning)</span>
+  </div>
+  <div class="progress-bar progress-bar-danger" style="width: 10%">
+    <span class="sr-only">10% Complete (danger)</span>
+  </div>
+  <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 20%">
+    <span class="sr-only">20% Complete (warning)</span>
+  </div>
+</div>

src/app/pages/progressBars/widgets/striped.html

@@ -0,0 +1,20 @@
+<div class="progress">
+  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+    <span class="sr-only">40% Complete (success)</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    <span class="sr-only">20% Complete</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+    <span class="sr-only">60% Complete (warning)</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+    <span class="sr-only">80% Complete (danger)</span>
+  </div>
+</div>

src/assets/css/main.scss

@@ -35,6 +35,7 @@
 "../../app/pages/grid/grid.scss",
 "../../app/pages/alerts/alerts.scss",
 "../../app/pages/mail/mail.scss",
+"../../app/pages/progressBars/progressBars.scss",
 "../../app/pages/mail/widgets/email-widget/email.scss",
 "../../app/pages/maps/widgets/leaflet/leaflet.scss",
 "../../app/pages/maps/widgets/google-maps/google-maps.scss",