ProgressCopy Anchor Link

@farm.js/progress shows a thin bar at the top of the page while a client navigation is in flight. Client navigations otherwise give no visual feedback: the page stays put until the new one renders. The bar is DOM-only and renderer-neutral, so it works the same for React, Preact, Solid, Vue, and Svelte apps.

InstallCopy Anchor Link

pnpm add @farm.js/progress

Complete exampleCopy Anchor Link

Register the plugin once in Farm config:

import { defineConfig } from "@farm.js/core";
import { progress } from "@farm.js/progress";

export default defineConfig({
  plugins: [progress()],
});

That is the whole setup. The bar appears when a client navigation starts, trickles forward while the new page loads, and completes when the page renders.

OptionsCopy Anchor Link

progress({
  delayMs: 150,
  color: "var(--accent)",
  height: 3,
});

BehaviorCopy Anchor Link

• The bar only covers client navigations. The initial page load keeps its own loading behavior; the plugin does not touch it.
• A navigation that renders before delayMs never shows the bar at all.
• A navigation that fails flashes the bar red and then hides it.
• A second navigation started while the first is still in flight keeps the bar up and restarts it from the beginning.
• A navigation canceled without a new one, such as by a hash link or a link to the current page, completes the bar and hides it.
• The bar is removed when the page closes or the plugin is replaced during development. Configure navigation progress in one progress() instance per app.