From ae742cb925b733e7135c892cd3bde73e2a9ca2b9 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 31 Aug 2019 11:33:17 +0200
Subject: [PATCH] fix(progress-spinner): rotating circle changing surrounding
 layout

When the progress spinner is rotating its layout can outside that of the parent which can have an effect on scroll bars. These changes put the rotating animation on the `svg` node and make the component host `overflow: hidden`.

Fixes #16894.
---
 .../progress-spinner/progress-spinner.scss    | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/material/progress-spinner/progress-spinner.scss b/src/material/progress-spinner/progress-spinner.scss
index 8219e98e617e..8808f2b6d57c 100644
--- a/src/material/progress-spinner/progress-spinner.scss
+++ b/src/material/progress-spinner/progress-spinner.scss
@@ -13,6 +13,10 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
   display: block;
   position: relative;
 
+  // Prevents the animating circle from going outside the bounds of the host
+  // and potentially changing the surrounding layout. See #16894.
+  overflow: hidden;
+
   svg {
     position: absolute;
     transform: rotate(-90deg);
@@ -30,9 +34,11 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
   }
 
   &.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] {
-    @include _noop-animation();
-    animation: mat-progress-spinner-linear-rotate $swift-ease-in-out-duration * 4
-        linear infinite;
+    svg {
+      @include _noop-animation();
+      animation: mat-progress-spinner-linear-rotate $swift-ease-in-out-duration * 4
+          linear infinite;
+    }
 
     circle {
       @include _noop-animation();
@@ -45,11 +51,13 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
   }
 
   &.mat-progress-spinner-indeterminate-fallback-animation[mode='indeterminate'] {
-    @include _noop-animation();
-    animation: mat-progress-spinner-stroke-rotate-fallback
-               $mat-progress-spinner-stroke-rotate-fallback-duration
-               $mat-progress-spinner-stroke-rotate-fallback-ease
-               infinite;
+    svg {
+      @include _noop-animation();
+      animation: mat-progress-spinner-stroke-rotate-fallback
+                 $mat-progress-spinner-stroke-rotate-fallback-duration
+                 $mat-progress-spinner-stroke-rotate-fallback-ease
+                 infinite;
+    }
 
     circle {
       @include _noop-animation();