material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-16 09:00:32 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5311 from christophe-g:cg-remove-unecessary-progress-animation

Browse Source 
PiperOrigin-RevId: 594013260
This commit is contained in:
Copybara-Service 2023-12-27 08:11:01 -08:00
commit 689f9459c2
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
progress/internal/_linear-progress.scss
View File

@ -114,6 +114,12 @@ $_indeterminate-duration: 2s;
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 .bar {
transition: none;
@ -131,10 +137,6 @@ $_indeterminate-duration: 2s;
display: block;
}
.indeterminate .dots {
display: none;
}
.indeterminate .primary-bar {
animation: linear infinite $_indeterminate-duration;
animation-name: primary-indeterminate-translate;

6
progress/internal/linear-progress.ts
View File

@ -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`
<div class="dots"></div>
<div class="dots" ?hidden=${hideDots}></div>
<div class="inactive-track" style=${styleMap(dotStyles)}></div>
<div class="bar primary-bar" style=${styleMap(progressStyles)}>
<div class="bar-inner"></div>