Package Exports

vue-loaders
vue-loaders/dist/loaders/ball-beat
vue-loaders/dist/loaders/ball-clip-rotate
vue-loaders/dist/vue-loaders.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-loaders) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue loaders

Based on loaders.css

< previous version

NPM

$ 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.js

Usage

Take a look at available names if you prefer <vue-loaders name="{loader name}"> syntax.

Take a look at available components list if you prefer <vue-loaders-{loader name}> syntax.

For available props see props.

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 setting a loader color in your styles, see example below:

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');

live example

<!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>

Loaders names

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

Components

vue-loaders-ball-beat
vue-loaders-ball-clip-rotate-multiple
vue-loaders-ball-clip-rotate-pulse
vue-loaders-ball-clip-rotate
vue-loaders-ball-grid-beat
vue-loaders-ball-grid-pulse
vue-loaders-ball-pulse-rise
vue-loaders-ball-pulse-sync
vue-loaders-ball-pulse
vue-loaders-ball-rotate
vue-loaders-ball-scale-multiple
vue-loaders-ball-scale-ripple-multiple
vue-loaders-ball-scale-ripple
vue-loaders-ball-scale
vue-loaders-ball-spin-fade-loader
vue-loaders-ball-triangle-path
vue-loaders-ball-zig-zag-deflect
vue-loaders-ball-zig-zag
vue-loaders-cube-transition
vue-loaders-line-scale-party
vue-loaders-line-scale-pulse-out-rapid
vue-loaders-line-scale-pulse-out
vue-loaders-line-scale
vue-loaders-line-spin-fade-loader
vue-loaders-pacman
vue-loaders-semi-circle-spin
vue-loaders-square-spin
vue-loaders-triangle-skew-spin

Props

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>