![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&size=40){kind=avatar}
$ npm install -S vue-loaders- umd: https://unpkg.com/vue-loaders/dist/vue-loaders.umd.js
- esm/mjs: https://unpkg.com/vue-loaders/dist/vue-loaders.esm.js
- umd:
https://unpkg.com/vue-loaders/dist/loaders/loader name.js
Before starting playing with loaders include some CSS to your bundle or page:
import 'vue-loaders/dist/vue-loaders.css';for bundle
<link rel="stylesheet" href="https://unpkg.com/vue-loaders/dist/vue-loaders.css">for page
It`s mandatory step. Without this CSS your loaders will not appears on page.
There are two ways how to use the library.
The first is to use main component vue-loaders.
<vue-loaders name="ball-beat"></vue-loaders>name is name of loader. You will found all avaliable loaders names here.
To use this way you should import vue-loaders and add this as plugin:
import VueLoaders from 'vue-loaders';
// add plugin
Vue.use(VueLoaders);or on page
<script src="https://unpkg.com/vue-loaders"></script>
<script>
Vue.use(VueLoaders);
</script>The second is to use separet loader component.
<vue-loaders-ball-beat></vue-loaders-ball-beat>You will found all avaliable loaders here.
Import separate loader component and then add this as plugin:
import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';
Vue.use(VueLoadersBallBeat);This way is good for perfomance and bundle size.
...or import entier library just as for the fist way:
import VueLoaders from 'vue-loaders';
Vue.use(VueLoaders);You can prefer first way or second or both of them. The main diffrent between them is when you use the second way you don`t need to include all loaders to your bundle.
Also check out props here or use IDE tips, this library provide web-types.
And some examples:
import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoaders from 'vue-loaders';
Vue.use(VueLoaders);
const template = `
<div>
<vue-loaders-ball-beat color="red" scale="1"></vue-loaders-ball-beat>
<hr/>
<vue-loaders name="ball-beat" color="red" scale="1"></vue-loaders>
</div>
`;
new Vue({
template
}).$mount('#app');import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';
Vue.use(VueLoadersBallBeat);
const template = `
<vue-loaders-ball-beat color="red" scale="1"></vue-loaders-ball-beat>
`;
new Vue({
template
}).$mount('#app');import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoaders from 'vue-loaders';
Vue.component('my-name', VueLoaders.component);
const template = `
<my-name name="ball-beat" color="red" scale="1"></my-name>
`;
new Vue({
template
}).$mount('#app');import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';
Vue.component('my-name', VueLoadersBallBeat.component);
const template = `
<my-name color="red" scale="1"></my-name>
`;
new Vue({
template
}).$mount('#app');import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat.js';
const template = `
<vue-loaders-ball-beat color="red" scale="1"></vue-loaders-ball-beat>
`;
new Vue({
components: {
[VueLoadersBallBeat.component.name]: VueLoadersBallBeat.component
},
template
}).$mount('#app');If you want manage loader color from CSS outside follow this example:
import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoaders from 'vue-loaders';
Vue.use(VueLoaders);
const template = `
<div style="color: red;">
<vue-loaders-ball-beat color="currentColor" scale="1"></vue-loaders-ball-beat>
</div>
`;
new Vue({
template
}).$mount('#app');<!DOCTYPE html>
<html>
<head>
<title>VueLoaders demo</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-loaders/dist/vue-loaders.css">
<script src="https://unpkg.com/vue-loaders"></script>
</head>
<body>
<div id="app">
<vue-loaders-ball-beat color="red" scale="2"></vue-loaders-ball-beat>
<hr/>
<vue-loaders name="ball-beat" color="red" scale="2"></vue-loaders>
</div>
<script>
Vue.use(VueLoaders);
new Vue().$mount('#app');
</script>
</body>
</html>
vue-loaders component support the following props:
name- name of loader(see names).color- loader color. May be any css color value.scale- loader scale. May be any scale number
vue-loaders-{loader name} components(see components) support the following props:
color- loader color. May be any css color value.scale- loader scale. May be any scale number
Examples:
<vue-loaders name="ball-beat" color="black" scale="1.2"></vue-loaders><vue-loaders-ball-beat color="black" scale="1"></vue-loaders-ball-beat>
