slay-loader
Slay Loader library for Vue3
GitHub repository: Slay loader
Here’s a brief introduction or check documentation
You can use it with global state your app, and connect the component on main App file. Or you can use it on separate page, and change state loader from local data.
What does it look like
Installation
$ npm i slay-loader
Use
main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { SlayLoader } from 'slay-loader';
import 'slay-loader/dist/style.css';
createApp(App)
.component('SlayLoader', SlayLoader)
.mount('#app')
Component
<SlayLoader
:show="true"
:animation="`fade`"
:time="500"
:background="`radial-gradient(circle, rgba(198,90,254,1) 0%, rgba(184,251,196,1) 100%)`"
:text="`Please wait, loading...`"
/>
Options
Directive | Type | Description
— | — | —
show | boolean | Show or hide loader
animation | string | Visual effect animation (fade, drag-top, drag-bottom, drag-left, drag-right)
time | number | Number duration animation in ms
background | string | Background color for loader (it can be gradient, or something else)
text | string | Text on loader
spinner | string | It can be your custom image spinner (examole: /assets/puff.svg)