mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
Merge pull request #5311 from christophe-g:cg-remove-unecessary-progress-animation
PiperOrigin-RevId: 594013260
This commit is contained in:
commit
689f9459c2
@ -114,6 +114,12 @@ $_indeterminate-duration: 2s;
|
|||||||
z-index: -1; // Place behind tracks for Safari
|
z-index: -1; // Place behind tracks for Safari
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// dots are hidden when indeterminate or when there is no visible buffer to
|
||||||
|
// prevent infinite invisible animation.
|
||||||
|
.dots[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
// indeterminate
|
// indeterminate
|
||||||
.indeterminate .bar {
|
.indeterminate .bar {
|
||||||
transition: none;
|
transition: none;
|
||||||
@ -131,10 +137,6 @@ $_indeterminate-duration: 2s;
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indeterminate .dots {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indeterminate .primary-bar {
|
.indeterminate .primary-bar {
|
||||||
animation: linear infinite $_indeterminate-duration;
|
animation: linear infinite $_indeterminate-duration;
|
||||||
animation-name: primary-indeterminate-translate;
|
animation-name: primary-indeterminate-translate;
|
||||||
|
@ -34,8 +34,12 @@ export class LinearProgress extends Progress {
|
|||||||
}%)`,
|
}%)`,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Only display dots when visible - this prevents invisible infinite
|
||||||
|
// animation.
|
||||||
|
const hideDots =
|
||||||
|
this.indeterminate || this.buffer >= this.max || this.value >= this.max;
|
||||||
return html`
|
return html`
|
||||||
<div class="dots"></div>
|
<div class="dots" ?hidden=${hideDots}></div>
|
||||||
<div class="inactive-track" style=${styleMap(dotStyles)}></div>
|
<div class="inactive-track" style=${styleMap(dotStyles)}></div>
|
||||||
<div class="bar primary-bar" style=${styleMap(progressStyles)}>
|
<div class="bar primary-bar" style=${styleMap(progressStyles)}>
|
||||||
<div class="bar-inner"></div>
|
<div class="bar-inner"></div>
|
||||||
|
Loading…
Reference in New Issue
Block a user