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
NPM
npm install @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')
Nuxt 3
import NbLoadersComponents from '@vlalg-nimbus/nb-loaders'
import "@vlalg-nimbus/nb-loaders/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbLoadersComponents)
})

To use, simply call the component, in this case it will be NbLoadingBar or nb-loading-bar.

Important: The NbLoadingBar component uses position: fixed and 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>
Mode 2
<template>
  <nb-loading-bar nb-id="loading-bar-1" :show="isLoading" />
</template>
Mode 3
<template>
  <nb-loading-bar nb-id="loading-bar-1" :show="isLoading"></nb-loading-bar>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
showBooleantrueDefines if the loading bar is visible
ariaLabelString'Alternate Text Button'Defines the aria-label attribute for screen readers
ariaAttrsObject{}Allows passing custom aria attributes as an object. Keys will automatically receive the aria- prefix
backgroundColorString'white'Defines the background color. Accepts Color name and Hex
progressColor1String'rgb(34, 197, 94)'First color in the gradient. Accepts Color name, Hex, and RGB
progressColor2String'rgb(59, 130, 246)'Second color in the gradient
progressColor3String'rgb(168, 85, 247)'Third color in the gradient
progressColor4String'rgb(236, 72, 153)'Fourth color in the gradient
progressColor5String'rgb(251, 146, 60)'Fifth color in the gradient
progressColor6String'rgb(34, 197, 94)'Sixth color in the gradient
progressColor7String'rgb(59, 130, 246)'Seventh color in the gradient
progressColor8String'rgb(168, 85, 247)'Eighth color in the gradient
heightNumber2Defines the height of the loading bar in pixels
borderRadiusNumber0.5Defines the border radius in rem units
positionString'top'Defines the position of the loading bar. Accepts top and bottom
topNumber0Defines the top offset in pixels (when position is 'top')
bottomNumber0Defines the bottom offset in pixels (when position is 'bottom')
leftNumber-1Defines the left offset in pixels (-1 means full width)
rightNumber-1Defines the right offset in pixels (-1 means full width)
zIndexNumber1000Defines the z-index of the loading bar

Events

nameReturn typeDescription
clickednothingFired when the loading bar is clicked, returns nothing
changedvalueFired when the show prop changes, returns the new value