Skip to content

Commit 4203d09

Browse files
crisbetojelbourn
authored andcommitted
fix(progress-spinner): animation expanding parent element (#1742)
Fixes the progress spinner expanding and shrinking it's scrollable parent. Fixes #1259.
1 parent 9a7d381 commit 4203d09

File tree

1 file changed

+5
-4
lines changed

1 file changed

+5
-4
lines changed

src/lib/progress-circle/progress-circle.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@import '../core/style/variables';
22

33

4-
// Animation Durations
4+
// Animation Durations
55
$md-progress-circle-duration: 5250ms !default;
66
$md-progress-circle-constant-rotate-duration: $md-progress-circle-duration * 0.55 !default;
77
$md-progress-circle-sporadic-rotate-duration: $md-progress-circle-duration !default;
88

9-
// Component sizing
9+
// Component sizing
1010
$md-progress-circle-stroke-width: 10px !default;
1111
// Height and weight of the viewport for md-progress-circle.
1212
$md-progress-circle-viewport-size: 100px !default;
@@ -18,6 +18,7 @@ $md-progress-circle-viewport-size: 100px !default;
1818
// The height and width are expected to be overwritten by application css.
1919
height: $md-progress-circle-viewport-size;
2020
width: $md-progress-circle-viewport-size;
21+
overflow: hidden;
2122

2223
// SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed
2324
// based on a 100px by 100px box. Additionally all SVG sizes and locations are in reference to
@@ -37,7 +38,7 @@ $md-progress-circle-viewport-size: 100px !default;
3738
}
3839

3940

40-
&[mode='indeterminate'] {
41+
&[mode='indeterminate'] svg {
4142
animation-duration: $md-progress-circle-sporadic-rotate-duration,
4243
$md-progress-circle-constant-rotate-duration;
4344
animation-name: md-progress-circle-sporadic-rotate,
@@ -50,7 +51,7 @@ $md-progress-circle-viewport-size: 100px !default;
5051
}
5152

5253

53-
// Animations for indeterminate mode
54+
// Animations for indeterminate mode
5455
@keyframes md-progress-circle-linear-rotate {
5556
0% { transform: rotate(0deg); }
5657
100% { transform: rotate(360deg); }

0 commit comments

Comments
 (0)