TopProgressBar

TopProgressBar renders a thin bar fixed to the top of the viewport that fills while a route transition is pending and fades out once it lands, giving users feedback during slow navigations without a full-page spinner. It takes no props — it reads navigation state directly from useRouterState (TanStack Router) and shows/hides itself automatically, so you mount it once near the root of your app, above <Outlet />.

Because it reads router state directly rather than through props, it only works inside a TanStack Router RouterProvider tree and can't be rendered in isolation — there's no interactive example on this page for that reason.

Example

import { TopProgressBar } from '@officina/ui';
import { Outlet } from '@tanstack/react-router';

function RootLayout() {
  return (
    <>
      <TopProgressBar />
      <Outlet />
    </>
  );
}

API

TopProgressBar is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.