Skip to content

Commit 930bc7e

Browse files
authored
fix(progress-spinner): rotating circle changing surrounding layout (#16930)
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 3866761 commit 930bc7e

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
@@ -14,6 +14,10 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
1414
display: block;
1515
position: relative;
1616

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

3943
&.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] {
40-
@include _noop-animation();
41-
animation: mat-progress-spinner-linear-rotate $swift-ease-in-out-duration * 4
42-
linear infinite;
44+
svg {
45+
@include _noop-animation();
46+
animation: mat-progress-spinner-linear-rotate $swift-ease-in-out-duration * 4
47+
linear infinite;
48+
}
4349

4450
circle {
4551
@include _noop-animation();
@@ -52,11 +58,13 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
5258
}
5359

5460
&.mat-progress-spinner-indeterminate-fallback-animation[mode='indeterminate'] {
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;
61+
svg {
62+
@include _noop-animation();
63+
animation: mat-progress-spinner-stroke-rotate-fallback
64+
$mat-progress-spinner-stroke-rotate-fallback-duration
65+
$mat-progress-spinner-stroke-rotate-fallback-ease
66+
infinite;
67+
}
6068

6169
circle {
6270
@include _noop-animation();

0 commit comments

Comments
 (0)