Skip to content

Commit 2613de4

Browse files
Merge pull request #5352 from datvm:linear-progress-buffer
PiperOrigin-RevId: 609528198
2 parents 2d54b97 + c7e26b5 commit 2613de4

File tree

1 file changed

+10
-5
lines changed

1 file changed

+10
-5
lines changed

progress/internal/linear-progress.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ import {Progress} from './progress.js';
1616
export class LinearProgress extends Progress {
1717
/**
1818
* Buffer amount to display, a fraction between 0 and `max`.
19+
* If the value is 0 or negative, the buffer is not displayed.
1920
*/
20-
@property({type: Number}) buffer = 1;
21+
@property({type: Number}) buffer = 0;
2122

2223
// Note, the indeterminate animation is rendered with transform %'s
2324
// Previously, this was optimized to use px calculated with the resizeObserver
@@ -28,16 +29,20 @@ export class LinearProgress extends Progress {
2829
(this.indeterminate ? 1 : this.value / this.max) * 100
2930
}%)`,
3031
};
32+
33+
const bufferValue = this.buffer ?? 0;
34+
const hasBuffer = bufferValue > 0;
35+
36+
const dotSize = this.indeterminate || !hasBuffer ? 1 : bufferValue / this.max;
37+
3138
const dotStyles = {
32-
transform: `scaleX(${
33-
(this.indeterminate ? 1 : this.buffer / this.max) * 100
34-
}%)`,
39+
transform: `scaleX(${dotSize * 100}%)`,
3540
};
3641

3742
// Only display dots when visible - this prevents invisible infinite
3843
// animation.
3944
const hideDots =
40-
this.indeterminate || this.buffer >= this.max || this.value >= this.max;
45+
this.indeterminate || !hasBuffer || bufferValue >= this.max || this.value >= this.max;
4146
return html`
4247
<div class="dots" ?hidden=${hideDots}></div>
4348
<div class="inactive-track" style=${styleMap(dotStyles)}></div>

0 commit comments

Comments
 (0)