LoadingBar

Top-of-page progress via useLoadingBar()

The thin bar along the top edge that says "something is on its way" without blocking anything — for route changes and background requests. Mount <BlessLoadingBar /> once at the app root; drive it from anywhere with useLoadingBar().

track(promise) is the usual call. start() / stop() count, so overlapping requests keep one bar up until the last one stops; a start() during the finish fade keeps it up. The bar trickles towards 90% on its own; set(p) shows real progress when you have it. With Vue Router:

const bar = useLoadingBar();
router.beforeEach(() => bar.start());
router.afterEach(() => bar.stop());

Nuxt ships <NuxtLoadingIndicator> for the same job; use that there. For a bar inside content with a known length, Progress; for "busy" on one element, Spinner or BlockUI.

Basic

watch the top edge of the page

<script setup lang="ts">
import { BlessButton, useLoadingBar } from "blessing-ui";
// <BlessLoadingBar /> is mounted once at the app root (this site does it in the theme layout)
const bar = useLoadingBar();
const fake = () => bar.track(new Promise((r) => setTimeout(r, 1800)));
const brief = () => (bar.start(), setTimeout(bar.stop, 800));
</script>

<template>
  <div class="row">
    <BlessButton @click="fake">Track a 1.8s request</BlessButton>
    <BlessButton variant="outline" @click="brief">Track a 0.8s request</BlessButton>
    <small>watch the top edge of the page</small>
  </div>
</template>

Usage

import { BlessLoadingBar } from "blessing-ui";

API

Props

Name	Type	Default	Description
height	string	"3px"
position	"top" | "bottom"	"top"
color	"text" | "accent"	"accent"