Contents
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>
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>
The post Vue.js Component To Create A Beautiful Loader – Vue-ui-preloader appeared first on Lipku.com.
Permanent link to this post here
