nb-loaders

This is a loaders 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 NbLoaders or nb-loaders.

Mode 1
<template>
  <NbLoaders />
</template>
Mode 2
<template>
  <nb-loaders />
</template>
Mode 3
<template>
  <nb-loaders></nb-loaders>
</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
typeString'clock'Defines the loader type. Accepts: clock, glass-filling, pulse-crazy, pulse, ring-pulse, double-ring-pulse, bling-ball, bars, water-drop, coin, circle-lines, solar, dots, leds, snake, zoom-ball, train, ring, partial-ring.
colorPrimaryString'#477e99'Defines the primary color. Accepts Color name and Hex
colorSecondaryString'#77d2ff'Defines the secondary color. Accepts Color name and Hex
colorExtraString'#68b9e2'Defines the extra color. Accepts Color name and Hex
disabledBooleanfalseDefines if the loader is disabled