fix(progress-bar): unable to apply visibility in indeterminate mode and reduce CSS (#2417)

Fixes #2413.

Author: crisbeto

src/lib/progress-bar/progress-bar.html

@@ -1,5 +1,5 @@
 <!-- The background div is named as such because it appears below the other divs and is not sized based on values. -->
-<div class="md-progress-bar-background"></div>
-<div class="md-progress-bar-buffer" [ngStyle]="_bufferTransform()"></div>
-<div class="md-progress-bar-primary md-progress-bar-fill" [ngStyle]="_primaryTransform()"></div>
-<div class="md-progress-bar-secondary md-progress-bar-fill"></div>
+<div class="md-progress-bar-background md-progress-bar-element"></div>
+<div class="md-progress-bar-buffer md-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
+<div class="md-progress-bar-primary md-progress-bar-fill md-progress-bar-element" [ngStyle]="_primaryTransform()"></div>
+<div class="md-progress-bar-secondary md-progress-bar-fill md-progress-bar-element"></div>

src/lib/progress-bar/progress-bar.scss

@@ -1,6 +1,3 @@
-@import '../core/style/variables';
-
-
 $md-progress-bar-height: 5px !default;
 $md-progress-bar-full-animation-duration: 2000ms !default;
 $md-progress-bar-piece-animation-duration: 250ms !default;
@@ -17,51 +14,46 @@ $md-progress-bar-piece-animation-duration: 250ms !default;
   transition: opacity $md-progress-bar-piece-animation-duration linear;
   width: 100%;
 
+  // Base styles that are re-used across all of the progress bar children.
+  .md-progress-bar-element, .md-progress-bar-fill::after {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+
   // The progress bar background is used to show the bubble animation scrolling behind a
   // buffering progress bar.
   .md-progress-bar-background {
     background-repeat: repeat-x;
     background-size: 10px 4px;
-    height: 100%;
-    position: absolute;
-    visibility: hidden;
-    width: 100%;
+    display: none;
   }
 
   // The progress bar buffer is the bar indicator showing the buffer value and is only visible
   // beyond the current value of the primary progress bar.
   .md-progress-bar-buffer {
-    height: 100%;
-    position: absolute;
     transform-origin: top left;
     transition: transform $md-progress-bar-piece-animation-duration ease;
-    width: 100%;
   }
 
-   // The secondary progress bar is only used in the indeterminate animation, because of this it
-   // is hidden in other uses.
+  // The secondary progress bar is only used in the indeterminate animation, because of this it
+  // is hidden in other uses.
   .md-progress-bar-secondary {
-    visibility: hidden;
+    display: none;
   }
 
   // The progress bar fill fills the progress bar with the indicator color.
   .md-progress-bar-fill {
     animation: none;
-    height: 100%;
-    position: absolute;
     transform-origin: top left;
     transition: transform $md-progress-bar-piece-animation-duration ease;
-    width: 100%;
   }
 
   // A pseudo element is created for each progress bar bar that fills with the indicator color.
   .md-progress-bar-fill::after {
     animation: none;
     content: '';
     display: inline-block;
-    height: 100%;
-    position: absolute;
-    width: 100%;
     left: 0;
   }
 
@@ -84,7 +76,7 @@ $md-progress-bar-piece-animation-duration: 250ms !default;
     .md-progress-bar-secondary {
       animation: md-progress-bar-secondary-indeterminate-translate $md-progress-bar-full-animation-duration infinite linear;
       left: -54.888891%;
-      visibility: visible;
+      display: block;
     }
     .md-progress-bar-secondary.md-progress-bar-fill::after {
       animation: md-progress-bar-secondary-indeterminate-scale $md-progress-bar-full-animation-duration infinite linear;
@@ -94,7 +86,7 @@ $md-progress-bar-piece-animation-duration: 250ms !default;
   &[mode='buffer'] {
     .md-progress-bar-background {
       animation: md-progress-bar-background-scroll $md-progress-bar-piece-animation-duration infinite linear;
-      visibility: visible;
+      display: block;
     }
   }
 }
@@ -114,7 +106,7 @@ $md-progress-bar-piece-animation-duration: 250ms !default;
 // mirrors the primary progress bar in appearance but is only shown to assist with the
 // indeterminate animations.
 
-// KEYFRAME BLOCK	                   DESCRIPTION
+// KEYFRAME BLOCK                      DESCRIPTION
 // primary-indeterminate-translate     Translation of the primary progressbar across the screen
 // primary-indeterminate-scale         Scaling of the primary bar as it's being translated across the screen
 // secondary-indeterminate-translate   Translation of the secondary bar across the screen