Loading Animation For Vue Apps - vue-preloader

Install & Download:

# Yarn
$ yarn add vue-preloader@latest
# NPM
$ npm i vue-preloader@latest

Description:

A preloader component that adds a configurable loading animation to your Vue 3 application.

How to use it:

1. Import the vue-preloader component.

import { VuePreloader } from 'vue-preloader';
import '../node_modules/vue-preloader/dist/style.css'

2. Add the <VuePreloader /> component to the app.

<VuePreloader></VuePreloader>

3. Available props to config the loading animation.

backgroundColor: {
  type: String as PropType<string>,
  default: '#091a28'
},
color: {
  type: String as PropType<string>,
  default: '#ffffff'
},
loadingSpeed: {
  type: Number as PropType<number>,
  default: 15
},
transitionSpeed: {
  type: Number as PropType<number>,
  default: 1400
},
transitionType: {
  type: String as PropType<string>,
  default: 'fade-left' // fade-left, fade-right, fade-up, and fade-down
}

4. Events.