I Built a Simple Top Loading Bar for Svelte 5
A small loading indicator can make navigation feel much more responsive. But when I looked for a top loading bar for my Svelte 5 app, I wanted something that was simple to add, worked with regular links, and didn’t make SvelteKit-specific code mandatory. So I built svelte-topbar : a Svelte component powered by NProgress, with automatic tracking for eligible same-origin links and an optional…
Developing a simple top loading bar for Svelte 5 applications can improve navigational responsiveness. However, when searching for such a component, the author desired one that was easy to incorporate, functional with conventional links, and not dependent on SvelteKit-specific code. Thus, svelte-topbar was created.
This Svelte component utilizes NProgress, automatically tracking eligible same-origin links and featuring an optional adapter for SvelteKit navigation. Installation is straightforward with any package manager such as npm, Bun, pnpm, or Yarn. Upon installation, NProgress is automatically added as a dependency.
To use the component, it should be rendered near the top of the app. The color and spinner can be customized along with other NProgress options. It is also compatible with server-side rendering, making it suitable for async operations. The creator can start and stop the loading process using methods like start() and done(), respectively.
For user-initiated operations, the createTopLoader() function provides controls. This function returns a controller that offers additional methods, including setProgress(), inc(), and remove(). These methods manage the shared NProgress instance, which can be configured with a single TopLoader / component.
SvelteKit users can benefit from the SvelteKit adapter provided. This adapter integrates with the navigation lifecycle callbacks of SvelteKit, allowing the package to function seamlessly in SvelteKit apps. In the root +layout.svelte, the adapter is set up and the built-in link tracking is turned off. This allows regular Svelte apps to avoid depending on or importing the SvelteKit adapter.
The author aimed to keep the basic usage of svelte-topbar simple: installing the package, rendering one component, and obtaining a useful loading indicator for regular same-origin links. For more control or SvelteKit apps, there is an imperative API. The package is still new, and the creator welcomes feedback from users, particularly regarding setup clarity or any issues encountered in real applications.
The package can be found on npm, and the source and demo projects are on GitHub. Users can open an issue or provide feedback if needed.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
