Add theme: Zen Loading Bar

themes/8ef24526-bc29-45b7-b62d-db973e1cf6c5/chrome.css

@@ -0,0 +1,129 @@
+
+@-moz-document url-prefix("chrome:") {
+  .browserSidebarContainer.deck-selected::before {
+    content: "" !important;
+    position: absolute !important;
+    top: 0px !important;
+    left: 0px !important;
+    height: 4px !important;
+    max-width: 100% !important;
+    width: var(--bar-pcent) !important;
+    background: var(--bar-colour) !important;
+    filter: drop-shadow(0px 0px 10px rgba(139, 92, 246, 0.8)) !important;
+    border-radius: 0 3px 3px 0 !important;
+    z-index: 1 !important;
+    transition: width 0.5s ease-in-out, top 0.1s ease-in-out, background 0.2s ease !important;
+  }
+
+@media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") and not (-moz-bool-pref: "zen.view.use-single-toolbar") {
+    .browserSidebarContainer.deck-selected::before {
+      top: 40px !important;
+    }
+  }
+
+.browserSidebarContainer.deck-selected:has([zen-glance-selected])::before,
+  .browserSidebarContainer.deck-selected.zen-glance-overlay::before {
+    max-width: calc(85%) !important;
+    left: calc(15%/2) !important;
+    border-radius: 4px !important;
+  }
+
+.browserSidebarContainer.deck-selected.zen-glance-background::before {
+    background: transparent !important;
+    height: 0px !important;
+  }
+
+:root {
+    &:has(.tabbrowser-tab[selected][busy]) {
+      --bar-colour: linear-gradient(90deg, #4c1d95, #7c3aed, #a855f7, #ec4899);
+      --bar-pcent: 15%;
+    }
+    &:has(.tabbrowser-tab[selected][busy][pendingicon]) {
+      --bar-colour: linear-gradient(90deg, #4c1d95, #7c3aed, #a855f7, #ec4899);
+      --bar-pcent: 45%;
+    }
+    &:has(.tabbrowser-tab[selected][busy][pendingicon][progress]) {
+      --bar-colour: linear-gradient(90deg, #4c1d95, #7c3aed, #a855f7, #ec4899);
+      --bar-pcent: 85%;
+    }
+    &:has(.tabbrowser-tab[selected][busy][progress]) {
+      --bar-colour: linear-gradient(90deg, #4c1d95, #7c3aed, #a855f7, #ec4899);
+      --bar-pcent: 95%;
+    }
+    &:has(.tabbrowser-tab[selected][muted]:not([busy])) {
+      --bar-colour: linear-gradient(90deg, #dc2626, #f97316);
+      --bar-pcent: 100%;
+      .browserSidebarContainer.deck-selected::before {
+        border-radius: 0;
+      }
+    }
+  }
+
+@media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
+    :root:not([zen-single-toolbar='true']):has([zen-compact-mode='true']) {
+      &:has(#zen-appcontent-navbar-wrapper[zen-has-hover]),
+      &:has(#zen-appcontent-navbar-wrapper[zen-user-show]),
+      &:has(#zen-appcontent-navbar-wrapper[has-popup-menu]),
+      &:has(*:is(#zen-appcontent-navbar-wrapper[panelopen='true'],
+                 #zen-appcontent-navbar-wrapper[open='true'],
+                 #urlbar:focus-within:not(#urlbar[zen-floating-urlbar='true']),
+                 #zen-appcontent-navbar-wrapper[breakout-extend='true'])
+            :not(.zen-compact-mode-ignore)
+      ) {
+        .browserSidebarContainer.deck-selected::before {
+          top: 39px !important;
+        }
+      }
+    }
+  }
+}
+
+/* Tab background progress fill */
+  .tabbrowser-tab .tab-content {
+    position: relative !important;
+  }
+
+.tabbrowser-tab .tab-content::before {
+    content: "" !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    height: 100% !important;
+    width: 100% !important;
+    opacity: 0 !important;
+    background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)) !important;
+    border-radius: 4px !important;
+    z-index: 0 !important;
+    pointer-events: none !important;
+    transition: width 0.2s ease-out, opacity 0.4s ease 0.2s !important;
+  }
+
+.tabbrowser-tab[busy] .tab-content::before {
+    opacity: 1 !important;
+    width: 15% !important;
+    transition: width 0.5s ease-in-out, opacity 0.1s ease !important;
+  }
+
+.tabbrowser-tab[busy][pendingicon] .tab-content::before {
+    opacity: 1 !important;
+    width: 45% !important;
+    transition: width 0.5s ease-in-out, opacity 0.1s ease !important;
+  }
+
+.tabbrowser-tab[busy][pendingicon][progress] .tab-content::before {
+    opacity: 1 !important;
+    width: 85% !important;
+    transition: width 0.5s ease-in-out, opacity 0.1s ease !important;
+  }
+
+.tabbrowser-tab[busy][progress] .tab-content::before {
+    opacity: 1 !important;
+    width: 95% !important;
+    transition: width 0.5s ease-in-out, opacity 0.1s ease !important;
+  }
+
+/* Keep close button above the fill */
+  .tabbrowser-tab .tab-close-button {
+    position: relative !important;
+    z-index: 1 !important;
+  }

themes/8ef24526-bc29-45b7-b62d-db973e1cf6c5/readme.md

@@ -0,0 +1,23 @@
+
+# Zen Loading Bar
+
+Adds a mobile-style loading indicator to Zen Browser - a purple gradient bar at the top of the screen plus a subtle white fill that grows inside each tab as pages load.
+
+## Features
+
+- **Top loading bar** - 6px gradient bar (purple → pink) sweeps across the top of the viewport during page load
+- **Tab progress fill** - semi-transparent white fill grows behind the tab label for all tabs including background tabs
+- **4 real progress stages** using Zen's native tab attributes (`busy`, `pendingicon`, `progress`)
+- **Smooth completion** - on page load finish, bar fills to 100% then fades out
+- **Compact mode support** - works correctly when the toolbar is hidden
+- **Glance mode aware** - adjusts correctly for Zen Glance overlay
+
+## Compatibility
+
+Tested on Zen Browser v1.19.8b. Works in compact mode and fullscreen.
+
+## How it works
+
+The top bar uses `::before` on `.browserSidebarContainer` and reads CSS variables set by `:root:has()` selectors that detect the active tab's loading state. The tab fill targets each tab's `.tab-content::before` independently so all tabs animate simultaneously.
+
+## Screensh

themes/8ef24526-bc29-45b7-b62d-db973e1cf6c5/theme.json

@@ -0,0 +1,14 @@
+{
+    "id": "8ef24526-bc29-45b7-b62d-db973e1cf6c5",
+    "name": "Zen Loading Bar",
+    "description": "Mobile-style loading indicator to Zen Browser plus a subtle progress bar on each tab as pages load.",
+    "homepage": "https://github.com/shariarratul/ZenLoadingBar",
+    "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8ef24526-bc29-45b7-b62d-db973e1cf6c5/chrome.css",
+    "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8ef24526-bc29-45b7-b62d-db973e1cf6c5/readme.md",
+    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8ef24526-bc29-45b7-b62d-db973e1cf6c5/image.png",
+    "author": "shariarratul",
+    "version": "1.0.0",
+    "tags": [],
+    "createdAt": "2026-04-12",
+    "updatedAt": "2026-04-12"
+}