Animated Preloader Component – Vue UI Loader

Description:

UI Loader is a simple and configurable loader/preloader component animated with CSS3 transitions.

How to use it:

1. Import the UI Loader component.

import loader from "vue-ui-preloader";

2. Register the component and we’re ready to go.

Vue.use(loader);

3. Create a loading spinner.

Vue UI Loader Spinning

<loader object="#ff9633" color1="#ffffff" color2="#17fd3d" size="5" speed="2" bg="#343a40" objectbg="#999793" opacity="80" name="spinning"></loader>

4. Create loading dots.

Vue UI Loader Dots

<loader object="#ff9633" color1="#ffffff" color2="#17fd3d" size="5" speed="2" bg="#343a40" objectbg="#999793" opacity="80" name="dots"></loader>

5. With Loading Text.

Vue UI Loader Loading Text

<loader object="#ff9633" color1="#ffffff" color2="#17fd3d" size="5" speed="2" bg="#343a40" objectbg="#999793" opacity="80" name="loading"></loader>

6. Create loading circles.

Vue UI Loader Loading Circles

7. Create loading boxes.

Vue UI Loader Box

 

Download Details:

Author: Bot-Academia

Live Demo: https://vue-preloader.netlify.app/

Download Link: https://github.com/Bot-Academia/Vue-ui-preloader/archive/master.zip

Official Website: https://github.com/Bot-Academia/Vue-ui-preloader

Install & Download:

# Yarn
$ yarn add vue-ui-preloader

# NPM
$ npm i vue-ui-preloader --save

You Might Be Interested In:

Add Comment