Skip to content

Commit ae742cb

Browse files
committed
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.
1 parent 31d8819 commit ae742cb

File tree

1 file changed

+16
-8
lines changed

1 file changed

+16
-8
lines changed

src/material/progress-spinner/progress-spinner.scss

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
1313
display: block;
1414
position: relative;
1515

16+
// Prevents the animating circle from going outside the bounds of the host
17+
// and potentially changing the surrounding layout. See #16894.
18+
overflow: hidden;
19+
1620
svg {
1721
position: absolute;
1822
transform: rotate(-90deg);
@@ -30,9 +34,11 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
3034
}
3135

3236
&.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] {
33-
@include _noop-animation();
34-
animation: mat-progress-spinner-linear-rotate $swift-ease-in-out-duration * 4
35-
linear infinite;
37+
svg {
38+
@include _noop-animation();
39+
animation: mat-progress-spinner-linear-rotate $swift-ease-in-out-duration * 4
40+
linear infinite;
41+
}
3642

3743
circle {
3844
@include _noop-animation();
@@ -45,11 +51,13 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
4551
}
4652

4753
&.mat-progress-spinner-indeterminate-fallback-animation[mode='indeterminate'] {
48-
@include _noop-animation();
49-
animation: mat-progress-spinner-stroke-rotate-fallback
50-
$mat-progress-spinner-stroke-rotate-fallback-duration
51-
$mat-progress-spinner-stroke-rotate-fallback-ease
52-
infinite;
54+
svg {
55+
@include _noop-animation();
56+
animation: mat-progress-spinner-stroke-rotate-fallback
57+
$mat-progress-spinner-stroke-rotate-fallback-duration
58+
$mat-progress-spinner-stroke-rotate-fallback-ease
59+
infinite;
60+
}
5361

5462
circle {
5563
@include _noop-animation();

0 commit comments

Comments
 (0)