Awesome Open Source
Awesome Open Source
vue-loaders

vue loaders

Version
loaders.css + vue

< previous version

NPM

$ npm install -S vue-loaders

CDN

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

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

Props

vue-loaders component support the following props:

vue-loaders-{loader name} components(see components) support the following props:

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>

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (67,339
css (7,156
vue (3,928
vuejs (1,051
animation (1,008
ui (963
plugin (728
component (533
ide (235
css3 (193
vue-components (191
loader (156
loading (106
progress (101
spinner (80
indicator (50
lib (23
animate (21

Find Open Source By Browsing 7,000 Topics Across 59 Categories