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

fix(progress): prevent unnecessary animation to run when not visible

Browse Source 
Progress has an infinite animation on `<div class="dots">`. `.dots` is
only visible when `value` < `max` or `buffer` < `max`. But the animation
runs in any case.
This commit is contained in:
christophe-g 2023-12-18 11:53:52 +01:00
parent 839667dcf6
commit 4de5e74b5c
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@
import {html} from 'lit';
import {property} from 'lit/decorators.js';
import {styleMap} from 'lit/directives/style-map.js';
import {when} from 'lit/directives/when.js';
import {Progress} from './progress.js';
@ -33,9 +34,10 @@ export class LinearProgress extends Progress {
(this.indeterminate ? 1 : this.buffer / this.max) * 100
}%)`,
};
// only display dots when visible - this prevents invisible infinite animation
const showDots = !this.indeterminate && (this.buffer >= this.max || this.value >= this.max) ;
return html`
<div class="dots"></div>
${when(showDots, () => html`<div class="dots"></div>`)}
<div class="inactive-track" style=${styleMap(dotStyles)}></div>
<div class="bar primary-bar" style=${styleMap(progressStyles)}>
<div class="bar-inner"></div>