diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss index 83b4867da1dd..1bf4ba2ba2a7 100644 --- a/src/lib/progress-bar/progress-bar.scss +++ b/src/lib/progress-bar/progress-bar.scss @@ -1,3 +1,5 @@ +@import '../core/style/variables'; + $mat-progress-bar-height: 5px !default; $mat-progress-bar-full-animation-duration: 2000ms !default; $mat-progress-bar-piece-animation-duration: 250ms !default; @@ -33,7 +35,8 @@ $mat-progress-bar-piece-animation-duration: 250ms !default; // beyond the current value of the primary progress bar. .mat-progress-bar-buffer { transform-origin: top left; - transition: transform $mat-progress-bar-piece-animation-duration ease; + transition: transform $mat-progress-bar-piece-animation-duration ease, + stroke $swift-ease-in-duration $ease-in-out-curve-function; } // The secondary progress bar is only used in the indeterminate animation, because of this it @@ -46,7 +49,8 @@ $mat-progress-bar-piece-animation-duration: 250ms !default; .mat-progress-bar-fill { animation: none; transform-origin: top left; - transition: transform $mat-progress-bar-piece-animation-duration ease; + transition: transform $mat-progress-bar-piece-animation-duration ease, + stroke $swift-ease-in-duration $ease-in-out-curve-function; } // A pseudo element is created for each progress bar bar that fills with the indicator color. diff --git a/src/lib/progress-spinner/progress-spinner.scss b/src/lib/progress-spinner/progress-spinner.scss index bcba3b5e4fa7..2fa64fdec1a6 100644 --- a/src/lib/progress-spinner/progress-spinner.scss +++ b/src/lib/progress-spinner/progress-spinner.scss @@ -35,6 +35,7 @@ $mat-progress-spinner-viewport-size: 100px !default; // Stroke width of 10px defines stroke as 10% of the viewBox. stroke-width: $mat-progress-spinner-stroke-width; + transition: stroke $swift-ease-in-duration $ease-in-out-curve-function; }