Skip to content

Commit

Permalink
fix(progress-spinner): animation expanding parent element (#1742)
Browse files Browse the repository at this point in the history
Fixes the progress spinner expanding and shrinking it's scrollable parent.

Fixes #1259.
  • Loading branch information
crisbeto authored and jelbourn committed Nov 8, 2016
1 parent 9a7d381 commit 4203d09
Showing 1 changed file with 5 additions and 4 deletions.
9 changes: 5 additions & 4 deletions src/lib/progress-circle/progress-circle.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
@import '../core/style/variables';


// Animation Durations
// Animation Durations
$md-progress-circle-duration: 5250ms !default;
$md-progress-circle-constant-rotate-duration: $md-progress-circle-duration * 0.55 !default;
$md-progress-circle-sporadic-rotate-duration: $md-progress-circle-duration !default;

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

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


&[mode='indeterminate'] {
&[mode='indeterminate'] svg {
animation-duration: $md-progress-circle-sporadic-rotate-duration,
$md-progress-circle-constant-rotate-duration;
animation-name: md-progress-circle-sporadic-rotate,
Expand All @@ -50,7 +51,7 @@ $md-progress-circle-viewport-size: 100px !default;
}


// Animations for indeterminate mode
// Animations for indeterminate mode
@keyframes md-progress-circle-linear-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
Expand Down

0 comments on commit 4203d09

Please sign in to comment.