[< previous version](https://github.com/Hokid/vue-loaders/tree/34e07c7c88e602423e497427e9f322692bd336d4)
## NPM
```bash
$ npm install -S vue-loaders
```
## CDN
* 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](#loaders)`.js`
## Usage
Take a look at available [names](#loaders) if you prefer `` syntax.
Take a look at available [components list](#loaders) if you prefer `` syntax.
For available props see [props](#props).
```javascript
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 = `
`;
new Vue({
template
}).$mount('#app');
```
```javascript
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 = `
`;
new Vue({
template
}).$mount('#app');
```
```javascript
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 = `
`;
new Vue({
template
}).$mount('#app');
```
```javascript
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 = `
`;
new Vue({
template
}).$mount('#app');
```
```javascript
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 = `
`;
new Vue({
components: {
[VueLoadersBallBeat.component.name]: VueLoadersBallBeat.component
},
template
}).$mount('#app');
```
If you want setting a loader color in your styles, see example below:
```javascript
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 = `
```
## Loaders
|Preview|Name|Component|
:-:|-|-|
||ball-beat|``|
||ball-clip-rotate-multiple|``|
||ball-clip-rotate-pulse|``|
||ball-clip-rotate|``|
||ball-grid-beat|``|
||ball-grid-pulse|``|
||ball-pulse-rise|``|
||ball-pulse-sync|``|
||ball-pulse|``|
||ball-rotate|``|
||ball-scale-multiple|``|
||ball-scale-ripple-multiple|``|
||ball-scale-ripple|``|
||ball-scale|``|
||ball-spin-fade-loader|``|
||ball-triangle-path|``|
||ball-zig-zag-deflect|``|
||ball-zig-zag|``|
||cube-transition|``|
||line-scale-party|``|
||line-scale-pulse-out-rapid|``|
||line-scale-pulse-out|``|
||line-scale|``|
||line-spin-fade-loader|``|
||pacman|``|
||semi-circle-spin|``|
||square-spin|``|
||triangle-skew-spin|``|
## Props
`vue-loaders` component support the following props:
* `name` - name of loader(see [names](#loaders)).
* `color` - loader color. May be any [css color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
* `scale` - loader scale. May be any [scale number](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)
`vue-loaders-{loader name}` components(see [components](#loaders)) support the following props:
* `color` - loader color. May be any [css color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
* `scale` - loader scale. May be any [scale number](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)
Examples:
```html
```
```html
```
---
_Source: https://npm.io/package/vue-loaders · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
