Skip to content

Commit

Permalink
fix(material-experimental/mdc-spinner): indeterminate animation not w…
Browse files Browse the repository at this point in the history
…orking

Seems like a regression from #21359. We can't use `:not` to apply the animation
styles, because MDC's mixins target `.mdc-progress-spinner`, rather than `&`.

These changes use the same manual approach as other components to disable
the animations.
  • Loading branch information
crisbeto committed Dec 18, 2020
1 parent 71b7b15 commit abaa3e6
Showing 1 changed file with 18 additions and 8 deletions.
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
@import '@material/circular-progress/mixins.import';
@import '../mdc-helpers/mdc-helpers';

@include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
@include mdc-circular-progress-core-styles($query: $mat-base-styles-query);

.mat-mdc-progress-spinner {
// Prevents the spinning of the inner element from affecting layout outside of the spinner.
overflow: hidden;
}

.mat-mdc-progress-spinner:not(._mat-animation-noopable) {
@include mdc-circular-progress-core-styles($query: animation);
}
&._mat-animation-noopable {
&, .mdc-circular-progress__determinate-circle {
// The spinner itself has a transition on `opacity`.
transition: none;
}

.mdc-circular-progress__indeterminate-circle-graphic,
.mdc-circular-progress__spinner-layer,
.mdc-circular-progress__indeterminate-container {
// Disables the rotation animations.
animation: none;
}

// Render the indeterminate spinner as a complete circle when animations are off
._mat-animation-noopable .mdc-circular-progress__indeterminate-container circle {
stroke-dasharray: 0 !important;
.mdc-circular-progress__indeterminate-container circle {
// Render the indeterminate spinner as a complete circle when animations are off
stroke-dasharray: 0 !important;
}
}
}

0 comments on commit abaa3e6

Please sign in to comment.