@craydel/craydel-processing-loader

CraydelProcessingLoader

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-processing-loader

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelProcessingLoader from '@craydel/craydel-processing-loader/src/CraydelProcessingLoader.vue'

const Components = {
  CraydelProcessingLoader,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

Name	Type	Default	Description
processing	boolean	false	Controls whether the component is visible or hidden.
text	string	'Please stand by'	Displays the text shown above the progress bar.

 

Usage

An example showing the processing loader.

<v-btn @click="show_loader = true">Show loader</v-btn>

<craydel-processing-loader :processing="show_loader"></craydel-processing-loader>

data()
{
  return {
    show_loader: false
  }
}