Vue.js Component To Create A Beautiful Loader – Vue-ui-preloader


Category: Vue.js Vue.js Loaders | July 20, 2021
Author: Bot-Academia
Official Page: Go to website
Last Update: July 20, 2021
License: MIT

vue preloader spinner

Description:

If you are looking to create a beautiful loader for your Vue.js project then, you are at the right place. Here, I’m sharing with you a component Vue-ui-preloader, that will help you in creating Vue.js loaders. This component is easy to use and fully customizable as per your need.

How can I use it?

1. You will need to install the component in your project with npm or yarn.

#yarn
yarn add vue-ui-preloader

#npm
npm install --save vue-ui-preloader

2. Import the component.

import loader from "vue-ui-preloader";

3. Now, initiate the component to put it in action.

Vue.use(loader);

4. Loading spinner.

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

5. For dots loading use this.

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

6. For loading with text, use this.

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

7. For circular loading, use following.

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

8. And, for loading Box.

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