nb-indeterminate

This is an indeterminate loader component for Vue.js 3+.

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 NbIndeterminate or nb-indeterminate.

Mode 1
<template>
  <NbIndeterminate />
</template>
Mode 2
<template>
  <nb-indeterminate />
</template>
Mode 3
<template>
  <nb-indeterminate></nb-indeterminate>
</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 loader 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'#e2e8f0'Defines the background color. Accepts Color name and Hex
progressBarColorString'#020617'Defines the progress bar color. Accepts Color name and Hex
heightNumber3Defines the height of the loader in pixels
borderRadiusNumber0.375Defines the border radius in rem units

Events

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