Getting Started
vue-preloader is a versatile and easy-to-use Vue.js component that allows you to add loading animations to your Vue.js or Nuxt.js projects. It is compatible with both Vue 2 and Vue 3, making it a flexible choice for developers who may be using different versions of the framework.
One of the standout features of Vue-Preloader is its simplicity. Implementing the component is straightforward and can be done in just a few lines of code. Once installed, you can simply add the vue-preloader tag to your Vue or Nuxt template and customize the animation and appearance as desired.
Another great aspect of Vue-Preloader is its extendability. The component comes with a range of pre-built animations, but you can also create your own custom animations or modify the existing ones to fit your projects needs. This makes it a great choice for developers who want to add unique loading animations that match their brand or projects style.
Installation
If you are using npm:
If you are using yarn:
Nuxt2 & Vue2
vue-preloader can easily be integrated into the layout of a Nuxt.js project or in a similar way in a Vue-cli project. To integrate vue-preloader into a Nuxt.js project, you can simply add the vue-preloader tag to your project's layout file.
layout/default.vue file in nuxt2:
To register a component globally, you would typically need to import the component in your main application file. This would allow you to use the component in any of your Vue templates, without having to import it separately in each individual component.
Slot & Slot Props
The vue-preloader component comes with a default slot that allows you to customize the content displayed within the preloader element. You can add any HTML or Vue.js template code within the slot to customize the look and feel of the preloader. This makes the component highly customizable and adaptable to any project's needs.
Color and percent as slotprops values that come directly from the component, together with the loading-is-over event can create powerful custom animations.
Available props
background-color
The prop background-color allows you to customize the background color of the preloader component. You can pass in a string value that represents a valid HEX color, such as #000000.
| Type | Required | Default |
|---|---|---|
| String | No | #091a28 |
color
This prop allows you to customize the color of loading bar.
| Type | Required | Default |
|---|---|---|
| String | No | #ffffff |
loading-speed
The loading-speed prop is used to adjust the speed of the loading bar. You can pass in a number value that represents the animation speed in milliseconds. A lower value will result in a faster animation, while a higher value will slow it down. This prop can take an integer value.
| Type | Required | Default |
|---|---|---|
| Number | No | 15 |
transition-speed
The transition-speed prop is used to adjust the speed of the transition between the preloader and the main content of your application. You can pass in a number value that represents the transition speed in milliseconds. A lower value will result in a faster transition, while a higher value will slow it down.
| Type | Required | Default |
|---|---|---|
| Number | No | 1400 |
transition-type
The transition-type prop in the Vue preloader component specifies the type of fade animation that will be used when the preloader is removed from the screen. The transition-type prop accepts four possible values: fade-left, fade-right, fade-up, and fade-down. Each value specifies the direction in which the preloader will fade out of view. When the transition-type prop is not specified, the preloader will fade out of view towards the left.
| Type | Required | Default |
|---|---|---|
| String | No | fade-left |
transition-is-over
The event transition-is-over is fired when the transition is over and the component is no longer available in the DOM. It can be useful to create logic when the vue-loader should be re-rendered.
| Type | Required | Default |
|---|---|---|
| Event | False | / |
loading-is-over
The event loading-is-over is fired when the loading process is complete. This event can be useful to trigger other actions that depend on the completion of the loading process, such as displaying a success message or enabling certain user interactions.
| Type | Required | Default |
|---|---|---|
| Event | False | / |
v3.x
Visit the following link for Vue3 usage.