File tree Expand file tree Collapse file tree 1 file changed +10
-5
lines changed Expand file tree Collapse file tree 1 file changed +10
-5
lines changed Original file line number Diff line number Diff line change @@ -16,8 +16,9 @@ import {Progress} from './progress.js';
16
16
export class LinearProgress extends Progress {
17
17
/**
18
18
* Buffer amount to display, a fraction between 0 and `max`.
19
+ * If the value is 0 or negative, the buffer is not displayed.
19
20
*/
20
- @property ( { type : Number } ) buffer = 1 ;
21
+ @property ( { type : Number } ) buffer = 0 ;
21
22
22
23
// Note, the indeterminate animation is rendered with transform %'s
23
24
// Previously, this was optimized to use px calculated with the resizeObserver
@@ -28,16 +29,20 @@ export class LinearProgress extends Progress {
28
29
( this . indeterminate ? 1 : this . value / this . max ) * 100
29
30
} %)`,
30
31
} ;
32
+
33
+ const bufferValue = this . buffer ?? 0 ;
34
+ const hasBuffer = bufferValue > 0 ;
35
+
36
+ const dotSize = this . indeterminate || ! hasBuffer ? 1 : bufferValue / this . max ;
37
+
31
38
const dotStyles = {
32
- transform : `scaleX(${
33
- ( this . indeterminate ? 1 : this . buffer / this . max ) * 100
34
- } %)`,
39
+ transform : `scaleX(${ dotSize * 100 } %)` ,
35
40
} ;
36
41
37
42
// Only display dots when visible - this prevents invisible infinite
38
43
// animation.
39
44
const hideDots =
40
- this . indeterminate || this . buffer >= this . max || this . value >= this . max ;
45
+ this . indeterminate || ! hasBuffer || bufferValue >= this . max || this . value >= this . max ;
41
46
return html `
42
47
< div class ="dots " ?hidden =${ hideDots } > </ div >
43
48
< div class ="inactive-track " style =${ styleMap ( dotStyles ) } > </ div >
You can’t perform that action at this time.
0 commit comments