From 41b5191b89a8124fe94ce59c295bfa885432d7e1 Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@protone.media>
Date: Mon, 22 Sep 2025 23:11:18 +0200
Subject: [PATCH 1/8] Update progress.ts

---
 packages/core/src/index.ts    |  4 +++-
 packages/core/src/progress.ts | 31 +++++++++++++++++++++++++++++++
 packages/react/src/index.ts   |  3 ++-
 packages/svelte/src/index.ts  |  2 +-
 packages/vue3/src/index.ts    |  2 +-
 5 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 843665256..1fc40fd00 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,3 +1,4 @@
+import { Progress } from './progress'
 import { Router } from './router'
 
 export { objectToFormData } from './formData'
@@ -8,6 +9,7 @@ export { hide as hideProgress, reveal as revealProgress, default as setupProgres
 export { resetFormFields } from './resetFormFields'
 export * from './types'
 export { hrefToUrl, isUrlMethodPair, mergeDataIntoQueryString, urlWithoutHash } from './url'
-export { type Router }
+export { type Progress, type Router }
 
+export const progress = new Progress()
 export const router = new Router()
diff --git a/packages/core/src/progress.ts b/packages/core/src/progress.ts
index 65b30e3d6..0a429dae2 100644
--- a/packages/core/src/progress.ts
+++ b/packages/core/src/progress.ts
@@ -1,6 +1,37 @@
 import ProgressComponent from './progress-component'
 import { GlobalEvent } from './types'
 
+export class Progress {
+  public start(): void {
+    ProgressComponent.start()
+  }
+
+  public hide(): void {
+    ProgressComponent.hide()
+  }
+
+  public set(value: number): void {
+    ProgressComponent.set(Math.max(0, Math.min(1, value)))
+  }
+
+  public finish(): void {
+    ProgressComponent.done()
+  }
+
+  public cancel(): void {
+    ProgressComponent.set(0)
+  }
+
+  public remove(): void {
+    ProgressComponent.done()
+    ProgressComponent.remove()
+  }
+
+  public isStarted(): boolean {
+    return ProgressComponent.isStarted()
+  }
+}
+
 let hideCount = 0
 
 export const reveal = (force = false) => {
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 97fb14950..3d4297f16 100755
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,5 +1,6 @@
-import { router as Router } from '@inertiajs/core'
+import { progress as Progress, router as Router } from '@inertiajs/core'
 
+export const progress = Progress
 export const router = Router
 export { default as createInertiaApp } from './createInertiaApp'
 export { default as Deferred } from './Deferred'
diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index f1e062da1..4dfec7209 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -1,4 +1,4 @@
-export { router } from '@inertiajs/core'
+export { progress, router } from '@inertiajs/core'
 export { default as Deferred } from './components/Deferred.svelte'
 export { default as Form } from './components/Form.svelte'
 export { default as Link } from './components/Link.svelte'
diff --git a/packages/vue3/src/index.ts b/packages/vue3/src/index.ts
index 5466f04ca..b52191bc0 100755
--- a/packages/vue3/src/index.ts
+++ b/packages/vue3/src/index.ts
@@ -1,4 +1,4 @@
-export { router } from '@inertiajs/core'
+export { progress, router } from '@inertiajs/core'
 export { usePage } from './app'
 export { default as createInertiaApp } from './createInertiaApp'
 export { default as Deferred } from './deferred'

From c2fefb6389bb4104e04a69d1a9d75dc5f970bdb8 Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Tue, 23 Sep 2025 16:41:45 +0200
Subject: [PATCH 2/8] Update progress.ts

---
 packages/core/src/progress.ts | 50 +++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/progress.ts b/packages/core/src/progress.ts
index 0a429dae2..203520db6 100644
--- a/packages/core/src/progress.ts
+++ b/packages/core/src/progress.ts
@@ -1,17 +1,29 @@
 import ProgressComponent from './progress-component'
 import { GlobalEvent } from './types'
 
+let hideCount = 0
+
 export class Progress {
   public start(): void {
     ProgressComponent.start()
   }
 
+  public reveal(force: boolean = false): void {
+    hideCount = Math.max(0, hideCount - 1)
+
+    if (force || hideCount === 0) {
+      ProgressComponent.show()
+    }
+  }
+
   public hide(): void {
+    hideCount++
+
     ProgressComponent.hide()
   }
 
-  public set(value: number): void {
-    ProgressComponent.set(Math.max(0, Math.min(1, value)))
+  public set(status: number): void {
+    ProgressComponent.set(Math.max(0, Math.min(1, status)))
   }
 
   public finish(): void {
@@ -30,23 +42,16 @@ export class Progress {
   public isStarted(): boolean {
     return ProgressComponent.isStarted()
   }
-}
 
-let hideCount = 0
-
-export const reveal = (force = false) => {
-  hideCount = Math.max(0, hideCount - 1)
-
-  if (force || hideCount === 0) {
-    ProgressComponent.show()
+  public getStatus(): number | null {
+    return ProgressComponent.status
   }
 }
 
-export const hide = () => {
-  hideCount++
+const progressInstance = new Progress()
 
-  ProgressComponent.hide()
-}
+export const reveal = progressInstance.reveal
+export const hide = progressInstance.hide
 
 function addEventListeners(delay: number): void {
   document.addEventListener('inertia:start', (e) => start(e, delay))
@@ -55,33 +60,32 @@ function addEventListeners(delay: number): void {
 
 function start(event: GlobalEvent<'start'>, delay: number): void {
   if (!event.detail.visit.showProgress) {
-    hide()
+    progressInstance.hide()
   }
 
-  const timeout = setTimeout(() => ProgressComponent.start(), delay)
+  const timeout = setTimeout(() => progressInstance.start(), delay)
   document.addEventListener('inertia:finish', (e) => finish(e, timeout), { once: true })
 }
 
 function progress(event: GlobalEvent<'progress'>): void {
-  if (ProgressComponent.isStarted() && event.detail.progress?.percentage) {
-    ProgressComponent.set(Math.max(ProgressComponent.status!, (event.detail.progress.percentage / 100) * 0.9))
+  if (progressInstance.isStarted() && event.detail.progress?.percentage) {
+    progressInstance.set(Math.max(progressInstance.getStatus()!, (event.detail.progress.percentage / 100) * 0.9))
   }
 }
 
 function finish(event: GlobalEvent<'finish'>, timeout: NodeJS.Timeout): void {
   clearTimeout(timeout!)
 
-  if (!ProgressComponent.isStarted()) {
+  if (!progressInstance.isStarted()) {
     return
   }
 
   if (event.detail.visit.completed) {
-    ProgressComponent.done()
+    progressInstance.finish()
   } else if (event.detail.visit.interrupted) {
-    ProgressComponent.set(0)
+    progressInstance.set(0)
   } else if (event.detail.visit.cancelled) {
-    ProgressComponent.done()
-    ProgressComponent.remove()
+    progressInstance.remove()
   }
 }
 

From f08f8d14fa51b92d49152f8f36fdc9b7286c1136 Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Tue, 23 Sep 2025 17:18:52 +0200
Subject: [PATCH 3/8] test

---
 packages/core/src/progress.ts                 |   4 +-
 packages/core/src/router.ts                   |   8 +-
 .../vue3/test-app/Pages/ProgressComponent.vue | 109 ++++++++++++
 tests/app/server.js                           |   2 +
 tests/progress-component.spec.ts              | 162 ++++++++++++++++++
 5 files changed, 279 insertions(+), 6 deletions(-)
 create mode 100644 packages/vue3/test-app/Pages/ProgressComponent.vue
 create mode 100644 tests/progress-component.spec.ts

diff --git a/packages/core/src/progress.ts b/packages/core/src/progress.ts
index 203520db6..9f025f820 100644
--- a/packages/core/src/progress.ts
+++ b/packages/core/src/progress.ts
@@ -30,7 +30,7 @@ export class Progress {
     ProgressComponent.done()
   }
 
-  public cancel(): void {
+  public reset(): void {
     ProgressComponent.set(0)
   }
 
@@ -83,7 +83,7 @@ function finish(event: GlobalEvent<'finish'>, timeout: NodeJS.Timeout): void {
   if (event.detail.visit.completed) {
     progressInstance.finish()
   } else if (event.detail.visit.interrupted) {
-    progressInstance.set(0)
+    progressInstance.reset()
   } else if (event.detail.visit.cancelled) {
     progressInstance.remove()
   }
diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts
index d4cf971c2..ecc1256a0 100644
--- a/packages/core/src/router.ts
+++ b/packages/core/src/router.ts
@@ -1,4 +1,4 @@
-import { hideProgress, revealProgress } from '.'
+import { progress } from '.'
 import { eventHandler } from './eventHandler'
 import { fireBeforeEvent } from './events'
 import { history } from './history'
@@ -192,10 +192,10 @@ export class Router {
     const prefetched = prefetchedRequests.get(requestParams)
 
     if (prefetched) {
-      revealProgress(prefetched.inFlight)
+      progress.reveal(prefetched.inFlight)
       prefetchedRequests.use(prefetched, requestParams)
     } else {
-      revealProgress(true)
+      progress.reveal(true)
       requestStream.send(Request.create(requestParams, currentPage.get()))
     }
   }
@@ -259,7 +259,7 @@ export class Router {
       return
     }
 
-    hideProgress()
+    progress.hide()
 
     this.asyncRequestStream.interruptInFlight()
 
diff --git a/packages/vue3/test-app/Pages/ProgressComponent.vue b/packages/vue3/test-app/Pages/ProgressComponent.vue
new file mode 100644
index 000000000..4c63590e7
--- /dev/null
+++ b/packages/vue3/test-app/Pages/ProgressComponent.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { progress } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+declare global {
+  interface Window {
+    progressTests: any[]
+  }
+}
+
+window.progressTests = []
+
+const logs = ref<string[]>([])
+
+const log = (...args: any[]) => {
+  const message = args.join(' ')
+  window.progressTests.push(...args)
+  logs.value.push(message)
+}
+
+const testStart = () => {
+  progress.start()
+  log('started')
+}
+
+const testSet25 = () => {
+  progress.set(0.25)
+  log('set 25%')
+}
+
+const testSet50 = () => {
+  progress.set(0.5)
+  log('set 50%')
+}
+
+const testSet75 = () => {
+  progress.set(0.75)
+  log('set 75%')
+}
+
+const testFinish = () => {
+  progress.finish()
+  log('finished')
+}
+
+const testReset = () => {
+  progress.reset()
+  log('reset')
+}
+
+const testRemove = () => {
+  progress.remove()
+  log('removed')
+}
+
+const testHide = () => {
+  progress.hide()
+  log('hidden')
+}
+
+const testReveal = () => {
+  progress.reveal()
+  log('revealed')
+}
+
+const testIsStarted = () => {
+  log('isStarted:', progress.isStarted())
+}
+
+const testGetStatus = () => {
+  log('getStatus:', progress.getStatus())
+}
+
+const clearLogs = () => {
+  window.progressTests = []
+  logs.value = []
+}
+</script>
+
+<template>
+  <div>
+    <h1>Progress API Test</h1>
+
+    <div>
+      <button @click="testStart">Start</button>
+      <button @click="testSet25">Set 25%</button>
+      <button @click="testSet50">Set 50%</button>
+      <button @click="testSet75">Set 75%</button>
+      <button @click="testFinish">Finish</button>
+    </div>
+
+    <div>
+      <button @click="testReset">Reset</button>
+      <button @click="testRemove">Remove</button>
+      <button @click="testHide">Hide</button>
+      <button @click="testReveal">Reveal</button>
+    </div>
+
+    <div>
+      <button @click="testIsStarted">Is Started</button>
+      <button @click="testGetStatus">Get Status</button>
+      <button @click="clearLogs">Clear</button>
+    </div>
+
+    <div>
+      Logs: <span id="logs">{{ logs.join(', ') }}</span>
+    </div>
+  </div>
+</template>
diff --git a/tests/app/server.js b/tests/app/server.js
index 53b42d9c2..1a79049d9 100644
--- a/tests/app/server.js
+++ b/tests/app/server.js
@@ -361,6 +361,8 @@ app.get('/progress/:pageNumber', (req, res) => {
   )
 })
 
+app.get('/progress-component', (req, res) => inertia.render(req, res, { component: 'ProgressComponent' }))
+
 app.get('/merge-props', (req, res) => {
   inertia.render(req, res, {
     component: 'MergeProps',
diff --git a/tests/progress-component.spec.ts b/tests/progress-component.spec.ts
new file mode 100644
index 000000000..afcf9d273
--- /dev/null
+++ b/tests/progress-component.spec.ts
@@ -0,0 +1,162 @@
+import { expect, Locator, test } from '@playwright/test'
+
+const getProgressPercent = async (bar: Locator) => {
+  return await bar.evaluate((element) => {
+    // Get the inline style transform value which has the original percentage
+    const inlineTransform = element.style.transform
+
+    if (!inlineTransform || inlineTransform === 'none') {
+      return 0
+    }
+
+    // Extract percentage from translate3d(-75%, 0px, 0px)
+    const match = inlineTransform.match(/translate3d\((-?\d+(?:\.\d+)?)%/)
+    return match ? parseFloat(match[1]) : 0
+  })
+}
+
+test.describe('Progress Component', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/progress-component')
+  })
+
+  test('start() creates nprogress bar and begins auto-animation', async ({ page }) => {
+    await expect(page.locator('#nprogress .bar')).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Start', exact: true }).click()
+
+    const bar = page.locator('#nprogress .bar')
+    const peg = page.locator('#nprogress .peg')
+
+    await expect(bar).toBeVisible()
+    await expect(peg).toBeVisible()
+
+    const initialTransform = await getProgressPercent(bar)
+    await expect(initialTransform).toBeCloseTo(-92, 1)
+
+    await page.waitForTimeout(300)
+    const afterTrickle = await getProgressPercent(bar)
+
+    await expect(afterTrickle).toBeGreaterThan(initialTransform)
+  })
+
+  test('set() without start() directly updates bar position', async ({ page }) => {
+    await page.getByRole('button', { name: 'Set 25%' }).click()
+
+    const bar = page.locator('#nprogress .bar')
+    await expect(bar).toBeVisible()
+
+    const transform25 = await getProgressPercent(bar)
+    await expect(transform25).toBeCloseTo(-75, 1)
+
+    await page.getByRole('button', { name: 'Set 50%' }).click()
+    const transform50 = await getProgressPercent(bar)
+    await expect(transform50).toBeCloseTo(-50, 1)
+
+    await page.getByRole('button', { name: 'Set 75%' }).click()
+    const transform75 = await getProgressPercent(bar)
+    await expect(transform75).toBeCloseTo(-25, 1)
+  })
+
+  test('finish() animates to 100% then fades out and removes bar', async ({ page }) => {
+    await page.getByRole('button', { name: 'Set 25%' }).click()
+
+    const bar = page.locator('#nprogress .bar')
+    await expect(bar).toBeVisible()
+
+    const beforeFinish = await getProgressPercent(bar)
+    await expect(beforeFinish).toBeCloseTo(-75, 1)
+
+    await page.getByRole('button', { name: 'Finish' }).click()
+
+    await page.waitForTimeout(100)
+
+    const duringFinish = await getProgressPercent(bar)
+    await expect(duringFinish).toBeGreaterThan(-75)
+
+    await page.waitForTimeout(250)
+    const at100 = await getProgressPercent(bar)
+    await expect(at100).toBeCloseTo(0, 1)
+
+    await page.waitForTimeout(500)
+    await expect(bar).not.toBeVisible()
+  })
+
+  test('reset() resets status to 0', async ({ page }) => {
+    await page.getByRole('button', { name: 'Set 50%' }).click()
+
+    const bar = page.locator('#nprogress .bar')
+    const transform50 = await getProgressPercent(bar)
+    await expect(transform50).toBeCloseTo(-50, 1)
+
+    await page.getByRole('button', { name: 'Reset' }).click()
+
+    const transform0 = await getProgressPercent(bar)
+    await expect(transform0).toBeCloseTo(-92, 1)
+  })
+
+  test('remove() completes and removes nprogress bar', async ({ page }) => {
+    await page.getByRole('button', { name: 'Start', exact: true }).click()
+    await page.getByRole('button', { name: 'Set 75%' }).click()
+
+    await expect(page.locator('#nprogress .bar')).toBeVisible()
+
+    await page.getByRole('button', { name: 'Remove' }).click()
+
+    await page.waitForTimeout(500)
+    await expect(page.locator('#nprogress .bar')).not.toBeVisible()
+  })
+
+  test('hide() and reveal() control nprogress visibility', async ({ page }) => {
+    await page.getByRole('button', { name: 'Start', exact: true }).click()
+
+    await expect(page.locator('#nprogress .bar')).toBeVisible()
+
+    await page.getByRole('button', { name: 'Hide' }).click()
+
+    await expect(page.locator('#nprogress .bar')).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Reveal' }).click()
+
+    await expect(page.locator('#nprogress .bar')).toBeVisible()
+  })
+
+  test('multiple hide() calls require multiple reveal() calls', async ({ page }) => {
+    await page.getByRole('button', { name: 'Start', exact: true }).click()
+    await expect(page.locator('#nprogress .bar')).toBeVisible()
+
+    await page.getByRole('button', { name: 'Hide' }).click()
+    await page.getByRole('button', { name: 'Hide' }).click()
+    await expect(page.locator('#nprogress .bar')).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Reveal' }).click()
+    await expect(page.locator('#nprogress .bar')).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Reveal' }).click()
+    await expect(page.locator('#nprogress .bar')).toBeVisible()
+  })
+
+  test('isStarted() reflects actual DOM state', async ({ page }) => {
+    await page.getByRole('button', { name: 'Is Started' }).click()
+    let tests = await page.evaluate(() => (window as any).progressTests)
+    let isStarted = tests[tests.length - 1]
+    await expect(isStarted).toBe(false)
+    await expect(page.locator('#nprogress .bar')).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Clear' }).click()
+    await page.getByRole('button', { name: 'Start', exact: true }).click()
+    await page.getByRole('button', { name: 'Is Started' }).click()
+    tests = await page.evaluate(() => (window as any).progressTests)
+    isStarted = tests[tests.length - 1]
+    await expect(isStarted).toBe(true)
+    await expect(page.locator('#nprogress .bar')).toBeVisible()
+
+    await page.getByRole('button', { name: 'Finish' }).click()
+    await page.getByRole('button', { name: 'Is Started' }).click()
+    tests = await page.evaluate(() => (window as any).progressTests)
+    isStarted = tests[tests.length - 1]
+    await expect(isStarted).toBe(false)
+    await page.waitForTimeout(500)
+    await expect(page.locator('#nprogress .bar')).not.toBeVisible()
+  })
+})

From e48cb9c4828aefd9a74b2f8c03c5fb89f447de91 Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Tue, 23 Sep 2025 17:22:42 +0200
Subject: [PATCH 4/8] React + Svelte

---
 .../test-app/Pages/ProgressComponent.tsx      | 109 ++++++++++++++++++
 .../test-app/Pages/ProgressComponent.svelte   | 108 +++++++++++++++++
 2 files changed, 217 insertions(+)
 create mode 100644 packages/react/test-app/Pages/ProgressComponent.tsx
 create mode 100644 packages/svelte/test-app/Pages/ProgressComponent.svelte

diff --git a/packages/react/test-app/Pages/ProgressComponent.tsx b/packages/react/test-app/Pages/ProgressComponent.tsx
new file mode 100644
index 000000000..6313e2875
--- /dev/null
+++ b/packages/react/test-app/Pages/ProgressComponent.tsx
@@ -0,0 +1,109 @@
+import { progress } from '@inertiajs/react'
+import { useState } from 'react'
+
+declare global {
+  interface Window {
+    progressTests: any[]
+  }
+}
+
+window.progressTests = []
+
+export default () => {
+  const [logs, setLogs] = useState<string[]>([])
+
+  const log = (...args: any[]) => {
+    const message = args.join(' ')
+    window.progressTests.push(...args)
+    setLogs((prevLogs) => [...prevLogs, message])
+  }
+
+  const testStart = () => {
+    progress.start()
+    log('started')
+  }
+
+  const testSet25 = () => {
+    progress.set(0.25)
+    log('set 25%')
+  }
+
+  const testSet50 = () => {
+    progress.set(0.5)
+    log('set 50%')
+  }
+
+  const testSet75 = () => {
+    progress.set(0.75)
+    log('set 75%')
+  }
+
+  const testFinish = () => {
+    progress.finish()
+    log('finished')
+  }
+
+  const testReset = () => {
+    progress.reset()
+    log('reset')
+  }
+
+  const testRemove = () => {
+    progress.remove()
+    log('removed')
+  }
+
+  const testHide = () => {
+    progress.hide()
+    log('hidden')
+  }
+
+  const testReveal = () => {
+    progress.reveal()
+    log('revealed')
+  }
+
+  const testIsStarted = () => {
+    log('isStarted:', progress.isStarted())
+  }
+
+  const testGetStatus = () => {
+    log('getStatus:', progress.getStatus())
+  }
+
+  const clearLogs = () => {
+    window.progressTests = []
+    setLogs([])
+  }
+
+  return (
+    <div>
+      <h1>Progress API Test</h1>
+
+      <div>
+        <button onClick={testStart}>Start</button>
+        <button onClick={testSet25}>Set 25%</button>
+        <button onClick={testSet50}>Set 50%</button>
+        <button onClick={testSet75}>Set 75%</button>
+        <button onClick={testFinish}>Finish</button>
+      </div>
+
+      <div>
+        <button onClick={testReset}>Reset</button>
+        <button onClick={testRemove}>Remove</button>
+        <button onClick={testHide}>Hide</button>
+        <button onClick={testReveal}>Reveal</button>
+      </div>
+
+      <div>
+        <button onClick={testIsStarted}>Is Started</button>
+        <button onClick={testGetStatus}>Get Status</button>
+        <button onClick={clearLogs}>Clear</button>
+      </div>
+
+      <div>
+        Logs: <span id="logs">{logs.join(', ')}</span>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/svelte/test-app/Pages/ProgressComponent.svelte b/packages/svelte/test-app/Pages/ProgressComponent.svelte
new file mode 100644
index 000000000..8c3857184
--- /dev/null
+++ b/packages/svelte/test-app/Pages/ProgressComponent.svelte
@@ -0,0 +1,108 @@
+<script context="module" lang="ts">
+  declare global {
+    interface Window {
+      progressTests: any[]
+    }
+  }
+</script>
+
+<script lang="ts">
+  import { progress } from '@inertiajs/svelte'
+
+  window.progressTests = []
+
+  let logs: string[] = []
+
+  const log = (...args: any[]) => {
+    const message = args.join(' ')
+    window.progressTests.push(...args)
+    logs = [...logs, message]
+  }
+
+  const testStart = () => {
+    progress.start()
+    log('started')
+  }
+
+  const testSet25 = () => {
+    progress.set(0.25)
+    log('set 25%')
+  }
+
+  const testSet50 = () => {
+    progress.set(0.5)
+    log('set 50%')
+  }
+
+  const testSet75 = () => {
+    progress.set(0.75)
+    log('set 75%')
+  }
+
+  const testFinish = () => {
+    progress.finish()
+    log('finished')
+  }
+
+  const testReset = () => {
+    progress.reset()
+    log('reset')
+  }
+
+  const testRemove = () => {
+    progress.remove()
+    log('removed')
+  }
+
+  const testHide = () => {
+    progress.hide()
+    log('hidden')
+  }
+
+  const testReveal = () => {
+    progress.reveal()
+    log('revealed')
+  }
+
+  const testIsStarted = () => {
+    log('isStarted:', progress.isStarted())
+  }
+
+  const testGetStatus = () => {
+    log('getStatus:', progress.getStatus())
+  }
+
+  const clearLogs = () => {
+    window.progressTests = []
+    logs = []
+  }
+</script>
+
+<div>
+  <h1>Progress API Test</h1>
+
+  <div>
+    <button on:click={testStart}>Start</button>
+    <button on:click={testSet25}>Set 25%</button>
+    <button on:click={testSet50}>Set 50%</button>
+    <button on:click={testSet75}>Set 75%</button>
+    <button on:click={testFinish}>Finish</button>
+  </div>
+
+  <div>
+    <button on:click={testReset}>Reset</button>
+    <button on:click={testRemove}>Remove</button>
+    <button on:click={testHide}>Hide</button>
+    <button on:click={testReveal}>Reveal</button>
+  </div>
+
+  <div>
+    <button on:click={testIsStarted}>Is Started</button>
+    <button on:click={testGetStatus}>Get Status</button>
+    <button on:click={clearLogs}>Clear</button>
+  </div>
+
+  <div>
+    Logs: <span id="logs">{logs.join(', ')}</span>
+  </div>
+</div>
\ No newline at end of file

From 10a3ecb83bc734aa027c06cad9c3b96195ce7611 Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Tue, 23 Sep 2025 17:29:38 +0200
Subject: [PATCH 5/8] refactor

---
 packages/core/src/index.ts    |  6 ++----
 packages/core/src/progress.ts | 33 ++++++++++++++++-----------------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 1fc40fd00..37e3ee3c3 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,15 +1,13 @@
-import { Progress } from './progress'
 import { Router } from './router'
 
 export { objectToFormData } from './formData'
 export { formDataToObject } from './formObject'
 export { default as createHeadManager } from './head'
 export { shouldIntercept, shouldNavigate } from './navigationEvents'
-export { hide as hideProgress, reveal as revealProgress, default as setupProgress } from './progress'
+export { hide as hideProgress, progress, reveal as revealProgress, default as setupProgress } from './progress'
 export { resetFormFields } from './resetFormFields'
 export * from './types'
 export { hrefToUrl, isUrlMethodPair, mergeDataIntoQueryString, urlWithoutHash } from './url'
-export { type Progress, type Router }
+export { type Router }
 
-export const progress = new Progress()
 export const router = new Router()
diff --git a/packages/core/src/progress.ts b/packages/core/src/progress.ts
index 9f025f820..fc0836a9e 100644
--- a/packages/core/src/progress.ts
+++ b/packages/core/src/progress.ts
@@ -3,7 +3,7 @@ import { GlobalEvent } from './types'
 
 let hideCount = 0
 
-export class Progress {
+class Progress {
   public start(): void {
     ProgressComponent.start()
   }
@@ -48,44 +48,43 @@ export class Progress {
   }
 }
 
-const progressInstance = new Progress()
-
-export const reveal = progressInstance.reveal
-export const hide = progressInstance.hide
+export const progress = new Progress()
+export const reveal = progress.reveal
+export const hide = progress.hide
 
 function addEventListeners(delay: number): void {
-  document.addEventListener('inertia:start', (e) => start(e, delay))
-  document.addEventListener('inertia:progress', progress)
+  document.addEventListener('inertia:start', (e) => handleStartEvent(e, delay))
+  document.addEventListener('inertia:progress', handleProgressEvent)
 }
 
-function start(event: GlobalEvent<'start'>, delay: number): void {
+function handleStartEvent(event: GlobalEvent<'start'>, delay: number): void {
   if (!event.detail.visit.showProgress) {
-    progressInstance.hide()
+    progress.hide()
   }
 
-  const timeout = setTimeout(() => progressInstance.start(), delay)
+  const timeout = setTimeout(() => progress.start(), delay)
   document.addEventListener('inertia:finish', (e) => finish(e, timeout), { once: true })
 }
 
-function progress(event: GlobalEvent<'progress'>): void {
-  if (progressInstance.isStarted() && event.detail.progress?.percentage) {
-    progressInstance.set(Math.max(progressInstance.getStatus()!, (event.detail.progress.percentage / 100) * 0.9))
+function handleProgressEvent(event: GlobalEvent<'progress'>): void {
+  if (progress.isStarted() && event.detail.progress?.percentage) {
+    progress.set(Math.max(progress.getStatus()!, (event.detail.progress.percentage / 100) * 0.9))
   }
 }
 
 function finish(event: GlobalEvent<'finish'>, timeout: NodeJS.Timeout): void {
   clearTimeout(timeout!)
 
-  if (!progressInstance.isStarted()) {
+  if (!progress.isStarted()) {
     return
   }
 
   if (event.detail.visit.completed) {
-    progressInstance.finish()
+    progress.finish()
   } else if (event.detail.visit.interrupted) {
-    progressInstance.reset()
+    progress.reset()
   } else if (event.detail.visit.cancelled) {
-    progressInstance.remove()
+    progress.remove()
   }
 }
 

From 9c4b3f8ade8ec71c67acff8d60d34eead7ec56cd Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Tue, 23 Sep 2025 17:45:49 +0200
Subject: [PATCH 6/8] Update progress.ts

---
 packages/core/src/progress.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/progress.ts b/packages/core/src/progress.ts
index fc0836a9e..4e665707e 100644
--- a/packages/core/src/progress.ts
+++ b/packages/core/src/progress.ts
@@ -1,23 +1,23 @@
 import ProgressComponent from './progress-component'
 import { GlobalEvent } from './types'
 
-let hideCount = 0
-
 class Progress {
+  private hideCount = 0
+
   public start(): void {
     ProgressComponent.start()
   }
 
   public reveal(force: boolean = false): void {
-    hideCount = Math.max(0, hideCount - 1)
+    this.hideCount = Math.max(0, this.hideCount - 1)
 
-    if (force || hideCount === 0) {
+    if (force || this.hideCount === 0) {
       ProgressComponent.show()
     }
   }
 
   public hide(): void {
-    hideCount++
+    this.hideCount++
 
     ProgressComponent.hide()
   }

From 81c74ea4164b3b54a607e227e1fd63fc62a39e65 Mon Sep 17 00:00:00 2001
From: pascalbaljet <8403149+pascalbaljet@users.noreply.github.com>
Date: Tue, 23 Sep 2025 15:46:25 +0000
Subject: [PATCH 7/8] Fix code style

---
 packages/svelte/test-app/Pages/ProgressComponent.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/test-app/Pages/ProgressComponent.svelte b/packages/svelte/test-app/Pages/ProgressComponent.svelte
index 8c3857184..de2ae5a3c 100644
--- a/packages/svelte/test-app/Pages/ProgressComponent.svelte
+++ b/packages/svelte/test-app/Pages/ProgressComponent.svelte
@@ -105,4 +105,4 @@
   <div>
     Logs: <span id="logs">{logs.join(', ')}</span>
   </div>
-</div>
\ No newline at end of file
+</div>

From c0adae609a2f6441509e3c90ed21e0fc401bcb12 Mon Sep 17 00:00:00 2001
From: Pascal Baljet <pascal@pascalbaljet.nl>
Date: Tue, 23 Sep 2025 17:52:42 +0200
Subject: [PATCH 8/8] Update progress.ts

---
 packages/core/src/progress.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/progress.ts b/packages/core/src/progress.ts
index 4e665707e..9c2faa50c 100644
--- a/packages/core/src/progress.ts
+++ b/packages/core/src/progress.ts
@@ -2,7 +2,7 @@ import ProgressComponent from './progress-component'
 import { GlobalEvent } from './types'
 
 class Progress {
-  private hideCount = 0
+  public hideCount = 0
 
   public start(): void {
     ProgressComponent.start()