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
clickedMouseEvent | KeyboardEventFired when the loader is clicked. Receives the native DOM event as first argument.
changedvalueFired when the show prop changes, returns the new value