Animated Preloader Component - Vue UI Loader

Install & Download:

# Yarn
$ yarn add vue-ui-preloader
# NPM
$ npm i vue-ui-preloader --save

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

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.

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

4. Create loading 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.

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

6. Create loading circles.

7. Create loading boxes.

08/23/2021

07/18/2021