Skip to content

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.

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE.md
MIT
LICENSE.txt
Notifications You must be signed in to change notification settings

SchnapsterDog/vue2-preloader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

32 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Contributors Downloads Issues MIT License LinkedIn


Logo

Vue2 Preloader

Valuable addition to any Vue.js or Nuxt.js project.

View Demo

Explore the docs Β» Β· Report Bug Β· Request Feature Β· Vue3 Version

About The Vue Preloader

Product Name Screen Shot

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 tag to your Vue or Nuxt template and customize the animation and appearance as desired.

Another great aspect of Vue-Preloader is its extendability. This makes it a great choice for developers who want to add unique loading animations that match their brand or projects style.

Why to use Vue Preloader

  • πŸ‘‰ It is easy to use and set up within Nuxt3 or Vite Projects
  • πŸ‘‰ It allows for custom styling and customization options.
  • πŸ‘‰ It has a smooth and fluid animation.
  • πŸ‘‰ It is lightweight and performs well.
  • πŸ‘‰ It is open source and free to use.

Getting Started

With vue-preloader, you can easily create loading animation to your Vue.js or Nuxt.js projects.

Installation

To use vue-preloader in your Vue or Nuxt.js project, simply install it with npm or yarn:

  • npm

    npm i vue2-preloader@latest --save
  • yarn

    yarn add vue2-preloader@latest

Nuxt & 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:

<div>
  <TemplatesHeader />
  <TemplatesPage>
	  <slot />
  </TemplatesPage>
  <TemplatesFooter />
  <vue-preloader
    background-color="#091a28"
    color="#ffffff"
    transition-type="fade-up"
    :loading-speed="25"
    :transition-speed="1400"
    @loading-is-over="loadingIsOver"
    @transition-is-over="transitionIsOver"
  ></vue-preloader>
</div>

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.

import Vue from 'vue'
import VuePreloader from 'vue2-preloader';
Vue.use(VuePreloader)

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.

<vue-preloader
  background-color="#091a28"
  color="#ffffff"
  transition-type="fade-up"
  :loading-speed="25"
  :transition-speed="1400"
>
  <span>You are awesome animation goes here</span>
</vue-preloader>

Color and percent as slotprops values that come directly from the component, together with the loading-is-over event can create powerful custom animations.

<vue-preloader
  background-color="#091a28"
  color="#ffffff"
  transition-type="fade-up"
  :loading-speed="25"
  :transition-speed="1400"
  @loading-is-over="showAnimation = false"
  @transition-is-over="transitionIsOver"
>
  <template v-slot="{ percent, color }">
    <transition name="loading-animation" mode="in-out">
      <span
        v-if="showAnimation"
        :style="{ color }"
      >
        {{ percent }}
      </span>
    </transition>
  </template>
</vue-preloader>
export default {
  data() {
    return {
      showAnimation: true
    }
  }
}

Transitions

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.

<VuePreloader
  background-color="#091a28"
  color="#ffffff"
  transition-type="fade-up"
  :loading-speed="25"
  :transition-speed="1400"
>
</VuePreloader>
<VuePreloader
  background-color="#091a28"
  color="#ffffff"
  transition-type="fade-down"
  :loading-speed="25"
  :transition-speed="1400"
>
</VuePreloader>
<VuePreloader
  background-color="#091a28"
  color="#ffffff"
  transition-type="fade-left"
  :loading-speed="25"
  :transition-speed="1400"
>
</VuePreloader>
<VuePreloader
  background-color="#091a28"
  color="#ffffff"
  transition-type="fade-right"
  :loading-speed="25"
  :transition-speed="1400"
>
</VuePreloader>

Available props

Name Type Default Description
background-color String #091a28 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.
color String #ffffff This prop allows you to customize the color of loading bar.
loading-speed Number 15 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.
transition-speed Number 1400 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.
transition-type String fade-left 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.
transition-is-over Event / 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.
loading-is-over Event / 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.

Vue2 Version

Version for Vue 2: https://github.com/schnapsterdog/vue2-preloader

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Oliver Trajceski - LinkedIn - [email protected]

Project Link: https://github.com/schnapsterdog/vue-preloader

Acknowledgments

Use this space to list resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!

About

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.

Topics

Resources

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE.md
MIT
LICENSE.txt

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published