From a5188bcccec1aaba9c2d2f8bea979f401956031c Mon Sep 17 00:00:00 2001
From: eelco <gitt@eelcoj.com>
Date: Mon, 16 Feb 2026 12:59:25 +0700
Subject: [PATCH] Make progress bar's styling customizable via CSS properties

Add CSS custom properties to control the progress bar's appearance instead of
overriding. All properties default to the original values to maintain backwards compatibility.

Example:
```css
:root {
  /* Customize appearance with rounded corners and shadow */
  --progress-bar-top: 1rem;
  --progress-bar-height: 4px;
  --progress-bar-background-color: #6366f1; /* an indigo color instead */
  --progress-bar-border-radius: 2px;
  --progress-bar-box-shadow: 0 1px 2px rgba(99 102 241 / .1);
}
```
---
 src/core/drive/progress_bar.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/core/drive/progress_bar.js b/src/core/drive/progress_bar.js
index 10c004101..4e87edc50 100644
--- a/src/core/drive/progress_bar.js
+++ b/src/core/drive/progress_bar.js
@@ -8,13 +8,15 @@ export class ProgressBar {
   static get defaultCSS() {
     return unindent`
       .turbo-progress-bar {
-        position: fixed;
-        display: block;
-        top: 0;
-        left: 0;
-        height: 3px;
-        background: #0076ff;
-        z-index: 2147483647;
+        position: var(--progress-bar-position, fixed);
+        display: var(--progress-bar-display, block);
+        top: var(--progress-bar-top, 0);
+        left: var(--progress-bar-left, 0);
+        height: var(--progress-bar-height, 3px);
+        background-color: var(--progress-bar-backgroundc-color, #0076ff);
+        border-radius: var(--progress-bar-border-radius, 0);
+        box-shadow: var(--progress-bar-box-shadow, none);
+        z-index: var(--progress-bar-z-index, 2147483647);
         transition:
           width ${ProgressBar.animationDuration}ms ease-out,
           opacity ${ProgressBar.animationDuration / 2}ms ${ProgressBar.animationDuration / 2}ms ease-in;