nb-loading-bar
This is a loading bar component for Vue.js 3+. It displays a fixed progress bar at the top or bottom of the page with an animated gradient effect.
Loading component...
Installation
Yarn
yarn add @vlalg-nimbus/nb-loaders
Usage
Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import NbLoadersComponents from '@vlalg-nimbus/nb-loaders'
import "@vlalg-nimbus/nb-loaders/dist/style.css";
const app = createApp(App)
app.use(NbLoadersComponents)
app.mount('#app')
To use, simply call the component, in this case it will be NbLoadingBar or nb-loading-bar.
Important: The
NbLoadingBarcomponent usesposition: fixedand will be positioned at the top or bottom of the viewport. It's typically used to show page loading progress.
Mode 1
<template>
<NbLoadingBar nb-id="loading-bar-1" :show="isLoading" />
</template>
Preview & Playground
Select the component you want to edit/test
Loading Sandbox...
Props
Items with an (*) mean they are required
| name | Value type | Default | Description |
|---|---|---|---|
| nbId (*) | String | Sets the id attribute to differentiate from other components | |
| show | Boolean | true | Defines if the loading bar is visible |
| ariaLabel | String | 'Alternate Text Button' | Defines the aria-label attribute for screen readers |
| ariaAttrs | Object | {} | Allows passing custom aria attributes as an object. Keys will automatically receive the aria- prefix |
| backgroundColor | String | 'white' | Defines the background color. Accepts Color name and Hex |
| progressColor1 | String | 'rgb(34, 197, 94)' | First color in the gradient. Accepts Color name, Hex, and RGB |
| progressColor2 | String | 'rgb(59, 130, 246)' | Second color in the gradient |
| progressColor3 | String | 'rgb(168, 85, 247)' | Third color in the gradient |
| progressColor4 | String | 'rgb(236, 72, 153)' | Fourth color in the gradient |
| progressColor5 | String | 'rgb(251, 146, 60)' | Fifth color in the gradient |
| progressColor6 | String | 'rgb(34, 197, 94)' | Sixth color in the gradient |
| progressColor7 | String | 'rgb(59, 130, 246)' | Seventh color in the gradient |
| progressColor8 | String | 'rgb(168, 85, 247)' | Eighth color in the gradient |
| height | Number | 2 | Defines the height of the loading bar in pixels |
| borderRadius | Number | 0.5 | Defines the border radius in rem units |
| position | String | 'top' | Defines the position of the loading bar. Accepts top and bottom |
| top | Number | 0 | Defines the top offset in pixels (when position is 'top') |
| bottom | Number | 0 | Defines the bottom offset in pixels (when position is 'bottom') |
| left | Number | -1 | Defines the left offset in pixels (-1 means full width) |
| right | Number | -1 | Defines the right offset in pixels (-1 means full width) |
| zIndex | Number | 1000 | Defines the z-index of the loading bar |
Events
| name | Return type | Description |
|---|---|---|
| clicked | nothing | Fired when the loading bar is clicked, returns nothing |
| changed | value | Fired when the show prop changes, returns the new value |
Table of Contents
