Skip to content

Commit

Permalink
fix(progress-spinner): rotating circle changing surrounding layout
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto committed Aug 31, 2019
1 parent dd548be commit b6ae845
Showing 1 changed file with 16 additions and 8 deletions.
24 changes: 16 additions & 8 deletions src/material/progress-spinner/progress-spinner.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();
Expand All @@ -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();
Expand Down

0 comments on commit b6ae845

Please sign in to comment.