@vuesimple/vs-loader
v3.0.7
Published
A simple vue loader. Perfect for all your loader scenarios.
Downloads
267
Maintainers
Readme
Vue Simple Loader
🗃 A simple vue loader. Perfect for all your loader scenarios.
A light weight vue plugin built groundup.
📺 Live Demo
Code Sandbox: Link
🛠 Install
npm i @vuesimple/vs-loader
🚀 Usage
<template>
<vs-loader variant="pulse"></vs-loader>
</template>
<script>
import VsLoader from '@vuesimple/vs-loader';
export default {
components: {
VsLoader,
},
};
</script>
🌎 CDN
<script src="https://unpkg.com/@vuesimple/vs-loader/dist/vs-loader.min.js"></script>
// Main/Entry file
app.use(VsLoader.plugin);
<template>
<vs-loader variant="pulse"></vs-loader>
</template>
Nuxt Code Snippet
After installation,
Create a file
/plugins/vs-loader.js
import Vue from 'vue'; import VsLoader from '@vuesimple/vs-loader'; Vue.component('vs-loader', VsLoader);
Update
nuxt.config.js
module.exports = { ... plugins: [ { src: '~plugins/vs-loader', mode: 'client' } ... ] }
In the page/ component
<template> <vs-loader variant="pulse"></vs-loader> </template>
Note
- For older Nuxt versions, use
<no-ssr>...</no-ssr>
tag. - You can also do
import VsLoader from '@vuesimple/vs-loader'
& add incomponent:{VsLoader}
and use it within component, without globally installing in plugin folder.
⚙ Props
| Name | Type | Default | Description |
| ------- | ------- | --------- | -------------------------------------------- |
| variant | String | pulse
| Variants: pulse
, dots
, inline
. |
| color | String | #1f73b7
| Loader color. |
| size | Number | 10
| Loader size. |
| center | Boolean | - | Center aligns the loader wrt the parent div. |