Loading Bar

LoadingBar is Orbital's global navigation chrome indicator — a slim teleported bar for route changes and coarse async work.

Mount a single LoadingBarProvider (or this LoadingBar alias) near your app root, then call LoadingBarInjection::start, LoadingBarInjection::finish, or LoadingBarInjection::error from handlers. The bar itself has no props — the provider teleports it to the viewport top.

  • Route transitions and full-page data fetches
  • Long-running saves where a slim top indicator is enough
  • App-wide async that should not block page interaction

Prefer Spinner for inline panel waits. Prefer ProgressBar when you have a known completion percentage.

  • Wrap your app shell (or preview subtree) in LoadingBarProvider or LoadingBar.
  • From a button handler, router hook, or resource callback, call LoadingBarInjection::expect_context().start() when work begins.
  • Call .finish() when the operation succeeds — the bar animates to 100% and hides.
  • Call .error() on failure — the bar completes with danger semantic color.
  • The bar teleports to the top of the viewport; children stay in place — only the provider placement matters.
Start loading

Wrap content in LoadingBarProvider, then call LoadingBarInjection::start() from a child trigger.

Finish flow

Typical async pattern: start() when work begins, finish() when it completes successfully.

Error flow

Call error() instead of finish() so the teleported bar completes with danger tokens.