Page progress bar

​

How it works

1. Automatic (router-driven). The router shows the bar during navigation, most visibly on the web where visiting a route downloads its lazy-loaded chunk. Every page gets this for free.
2. Opt-in (page-driven). A page that fetches its own data drives the same bar through the fetch, so the bar reflects the real load.

• Trickle: start() shows the bar and lets it creep toward 90% on its own; done() finishes it to 100% and hides it. It looks alive even when the duration is unknown.
• Show-delay (200 ms): navigations faster than this never flash the bar. On native builds route chunks are bundled, so navigation is instant and the router bar simply doesn’t appear.
• Accessibility: honors prefers-reduced-motion — the slide transition and stream dots switch off.

​

Quick start: nothing to do

​

Adding a data-loading page

{
  path: '/reports',
  component: () => import('@/views/pages/reports/Reports.vue'),
  meta: { requiresAuth: true, managesProgress: true },
}

import { useRouteProgress } from '@/composables/useRouteProgress';
const pageProgress = useRouteProgress();

onMounted(async () => {
  pageProgress.start();          // show + auto-trickle
  try {
    await loadReports();
  } finally {
    pageProgress.done();         // ALWAYS complete, even on error
  }
});

pageProgress.start();
await loadHeader();  pageProgress.set(0.4);
await loadRows();    pageProgress.set(0.8);
await loadFooter();  pageProgress.done();

​

API — useRouteProgress()

​

Best practices

• Always done() in a finally. If the fetch throws and you don’t complete, the bar stays visible.
• Don’t mark static pages managesProgress. Set the flag but never call done() and the bar hangs.
• Prefer the global bar. Two global-position bars would overlap.
• start() vs set(): start() = “I don’t know how long, show activity”; set() = “I know the real percentage”.

​

Customization