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.

  • @transition-is-over
  • @loading-is-over

Preview:

vue-preloader

Changelog:

v1.1.4 (11/04/2023)

  • Update

v1.1.2 (07/16/2023)

  • style: refactor overflowActive prop

v1.1.0 (03/02/2023)

  • feat: created transition-type prop, restructure component, added transitionmap file, added constants for transition, refactoring inside main file

Add Comment