feat(linear_progress): Add linear progress indicator

This linear progress directive displays a simple, animated loading bar. There are four display modes: determinate, indeterminate, buffer and query.

Closes #187

config/build.config.js

@@ -92,6 +92,7 @@ module.exports = {
       'src/components/toolbar/toolbar.js',
       'src/components/whiteframe/whiteframe.js',
       'src/components/divider/divider.js',
+      'src/components/linearProgress/linearProgress.js',
 
       //Services
       'src/services/decorators.js',

src/base/_mixins.scss

@@ -71,6 +71,12 @@
   user-select: $val;
 }
 
+@mixin animation($animation) {
+  -webkit-animation: #{$animation};
+  -moz-animation: #{$animation};
+  -ms-animation: #{$animation};
+  animation: #{$animation};
+}
 
 @mixin keyframes($name) {
   @-webkit-keyframes #{$name} {

src/components/linearProgress/README.md

@@ -0,0 +1 @@
+Linear progress bars, created with the `<material-linear-progress>` directive.

src/components/linearProgress/_linearProgress.scss

@@ -0,0 +1,243 @@
+$bar-height: 5px;
+
+material-linear-progress {
+  display: block;
+  width: 100%;
+  height: $bar-height;
+
+  .container {
+    overflow: hidden;
+    position: relative;
+    height: 0;
+    background-color: $color-blue-100;
+    top: $bar-height;
+    @include transition(all .3s linear);
+  }
+
+  .container.ready {
+    height: $bar-height;
+    top: 0;
+  }
+
+  .bar {
+    height: $bar-height;
+    background-color: $color-blue-500;
+    position: absolute;
+  }
+
+  .bar1, .bar2 {
+  	@include transition(width 0.2s linear);
+  }
+
+  &[mode=determinate] {
+    .bar1 {
+    	display: none;
+    }
+  }
+
+  &[mode=indeterminate] {
+    .bar1 {
+      left: 50%;
+      width: 10%;
+      @include animation(indeterminate1 5s infinite linear);
+    }
+
+    .bar2 {
+      left: 0%;
+      width: 0%;
+      @include animation(indeterminate2 5s infinite linear);
+    }
+  }
+
+  &[mode=buffer] {
+    .container{
+      background-color: transparent;
+    }
+
+	  .dashed:before {
+		  content: "";
+		  display: block;
+		  height: $bar-height;
+		  width: 100%;
+		  margin-top: 0px;
+	    position: absolute;
+
+		  background:
+				radial-gradient(#d0d9ff 0%, #d0d9ff 20%, transparent 50%);
+				background-color: transparent; 
+				background-size: 10px 10px;
+			background-position: 0px -23px;
+
+			@include animation(buffer 3s infinite linear);
+		}
+
+		.bar1 {
+			background-color: $color-blue-100;
+		}
+  } 
+
+  &[mode=query] {
+    .bar2 {
+      left: 50%;
+      width: 10%;
+      @include animation(query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000));
+    }
+  }
+}
+
+@include keyframes(indeterminate1) {
+  0% {
+    width: 0%;
+    left: 0%;
+  }
+  10% {
+    width: 30%;
+    left: 100%;
+  }
+  19.99% {
+    width: 30%;
+    left: 100%;
+  }
+  20% {
+    width: 0%;
+    left: 0%;
+  }
+  30% {
+    width: 80%;
+    left: 100%;
+  }
+  30.01% {
+    width: 0%;
+    left: 0%;
+  }
+  40% {
+    width: 5%;
+    left: 30%;
+  }
+  50% {
+    width: 50%;
+    left: 100%;
+  }
+  50.01% {
+    width: 0%;
+    left: 0%;
+  }
+  60% {
+    width: 60%;
+    left: 20%;
+  }
+  70% {
+    width: 5%;
+    left: 100%;
+  }
+  70.01% {
+    width: 0%;
+    left: 0%;
+  }
+  80% {
+    width: 50%;
+    left: 30%;
+  }
+  90% {
+    width: 10%;
+    left: 80%;
+  }
+  100% {
+    width: 20%;
+    left: 100%;
+  }
+}
+
+@include keyframes(indeterminate2) {
+  0% {
+    width: 0%;
+    left: 0%;
+  }
+  10% {
+    width: 60%;
+  }
+  19.99% {
+    width: 40%;
+    left: 100%;
+  }
+  20% {
+    width: 0%;
+    left: 0%;
+  }
+  25% {
+    width: 10%;
+    left: 10%;
+  }
+  30% {
+    width: 40%;
+    left: 30%;
+  }
+  40% {
+    width: 60%;
+    left: 100%;
+  }
+  40.01% {
+    width: 0%;
+    left: 0%;
+  }
+  50% {
+    width: 10%;
+    left: 40%;
+  }
+  60% {
+    width: 30%;
+    left: 100%;
+  }
+  60.01% {
+    width: 0%;
+    left: 0%;
+  }
+  70% {
+    width: 10%;
+    left: 40%;
+  }
+  80% {
+    width: 5%;
+    left: 100%;
+  }
+  80.01% {
+    width: 0%;
+    left: 0%;
+  }
+  90% {
+    width: 70%;
+    left: 10%;
+  }
+  100% {
+    width: 10%;
+    left: 100%;
+  }
+}
+
+@include keyframes(query) {
+  0% {
+    width: 30%;
+    left: 70%;
+  }
+  100% {
+    width: 0%;
+    left: 0%;
+    opacity: 0;
+  }
+}
+
+@include keyframes(buffer) {
+  0% {
+    opacity: 1;
+    background-position: 0px -23px;
+  }
+
+  50% {
+		opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+    background-position: -200px -23px;
+  }
+}

src/components/linearProgress/demo1/index.html

@@ -0,0 +1,13 @@
+<div ng-app="app" ng-controller="AppCtrl">
+  <h2>Determinate</h2>
+  <material-linear-progress mode="determinate" value="{{determinateValue}}"></material-linear-progress>
+
+  <h2>Indeterminate</h2>
+  <material-linear-progress mode="indeterminate"></material-linear-progress>
+
+  <h2>Buffer</h2>
+  <material-linear-progress mode="buffer" value="{{determinateValue}}" secondaryValue="{{determinateValue2}}"></material-linear-progress>
+
+  <h2>Query Indeterminate and Determinate</h2>
+  <material-linear-progress mode="{{mode}}" value="{{determinateValue}}"></material-linear-progress>
+</div>

src/components/linearProgress/demo1/script.js

@@ -0,0 +1,19 @@
+angular.module('app', ['ngMaterial'])
+.controller('AppCtrl', function($scope, $interval) {
+  $scope.mode = 'query';
+  $scope.determinateValue = 30;
+  $scope.determinateValue2 = 30;
+
+  $interval(function() {
+    $scope.determinateValue += 1;
+    $scope.determinateValue2 += 1.5;
+    if ($scope.determinateValue > 100) {
+      $scope.determinateValue = 30;
+      $scope.determinateValue2 = 30;
+    }
+  }, 100, 0, true);
+
+  $interval(function() {
+    $scope.mode = ($scope.mode == 'query' ? 'determinate' : 'query');
+  }, 7200, 0, true);
+});

src/components/linearProgress/demo1/style.css

@@ -0,0 +1,4 @@
+
+body {
+  padding: 20px;
+}

src/components/linearProgress/linearProgress.js

@@ -0,0 +1,81 @@
+/**
+ * @ngdoc module
+ * @name material.components.linearProgress
+ * @description Linear Progress module!
+ */
+angular.module('material.components.linearProgress', [
+  'material.animations',
+  'material.services.aria'
+])
+  .directive('materialLinearProgress', ['$timeout', MaterialLinearProgressDirective]);
+
+/**
+ * @ngdoc directive
+ * @name materialLinearProgress
+ * @module material.components.linearProgress
+ * @restrict E
+ *
+ * @description
+ * The linear progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content. Each operation should only be represented by one activity indicator—for example, one refresh operation should not display both a refresh bar and an activity circle.
+ *
+ * For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.
+ *
+ * For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
+ *
+ * @param {string} mode Select from one of four modes: determinate, indeterminate, buffer or query.
+ * @param {number=} value In determinate and buffer modes, this number represents the percentage of the primary progress bar.
+ * @param {number=} secondaryValue In the buffer mode, this number represents the precentage of the secondary progress bar.
+ *
+ * @usage
+ * <hljs lang="html">
+ * <material-linear-progress mode="determinate" value="..."></material-linear-progress>
+ *
+ * <material-linear-progress mode="indeterminate"></material-linear-progress>
+ *
+ * <material-linear-progress mode="buffer" value="..." secondaryValue="..."></material-linear-progress>
+ *
+ * <material-linear-progress mode="query"></material-linear-progress>
+ * </hljs>
+ */
+function MaterialLinearProgressDirective($timeout) {
+  return {
+    restrict: 'E',
+    template: 
+      '<div class="container">' + 
+        '<div class="dashed"></div>' +
+        '<div class="bar bar1"></div>' +
+        '<div class="bar bar2"></div>' + 
+      '</div>',
+    link: function(scope, element, attr) {
+      var bar1 = element.find('.bar1'),
+          bar2 = element.find('.bar2'),
+          container = element.find('.container');
+
+      attr.$observe('value', function(value) {
+        bar2.css('width', clamp(value).toString() + '%');
+      });
+
+      attr.$observe('secondaryvalue', function(value) {
+        bar1.css('width', clamp(value).toString() + '%');
+      });
+
+      $timeout(function(){container.addClass('ready');});
+    }
+  };
+}
+
+// **********************************************************
+// Private Methods
+// **********************************************************
+
+function clamp(value) {
+  if (value > 100) {
+    return 100;
+  }
+
+  if (value < 0) {
+    return 0;
+  }
+
+  return value;
+}

src/components/linearProgress/linearProgress.spec.js

@@ -0,0 +1,4 @@
+describe('materialLinearProgress', function() {
+
+
+});