diff --git a/progress/internal/linear-progress.ts b/progress/internal/linear-progress.ts
index 5b146535f..555e32669 100644
--- a/progress/internal/linear-progress.ts
+++ b/progress/internal/linear-progress.ts
@@ -16,9 +16,9 @@ import {Progress} from './progress.js';
 export class LinearProgress extends Progress {
   /**
    * Buffer amount to display, a fraction between 0 and `max`.
-   * If negative, the buffer is not displayed.
+   * If the value is 0 or negative, the buffer is not displayed.
    */
-  @property({type: Number}) buffer = -1;
+  @property({type: Number}) buffer = 0;
 
   // Note, the indeterminate animation is rendered with transform %'s
   // Previously, this was optimized to use px calculated with the resizeObserver
@@ -29,17 +29,20 @@ export class LinearProgress extends Progress {
         (this.indeterminate ? 1 : this.value / this.max) * 100
       }%)`,
     };
+
+    const bufferValue = Math.min(this.buffer ?? 0, this.max);
+    const hasBuffer = bufferValue > 0;
+
+    const dotSize = this.indeterminate || !hasBuffer ? 1 : bufferValue / this.max;
+
     const dotStyles = {
-      transform: `scaleX(${
-        // == null is used to check for both null and undefined when buffer attribute is removed
-        (this.indeterminate || this.buffer == null || this.buffer < 0 ? 1 : this.buffer / this.max) * 100
-      }%)`,
+      transform: `scaleX(${dotSize * 100}%)`,
     };
 
     // Only display dots when visible - this prevents invisible infinite
     // animation.
     const hideDots =
-      this.indeterminate || this.buffer == null || this.buffer < 0 || this.buffer >= this.max || this.value >= this.max;
+      this.indeterminate || !hasBuffer || this.value >= this.max;
     return html`
       <div class="dots" ?hidden=${hideDots}></div>
       <div class="inactive-track" style=${styleMap(dotStyles)}></div>