Awesome Open Source
Awesome Open Source
vue-loaders

vue loaders

Version
loaders.css + vue

< previous version

NPM

$ npm install -S vue-loaders

CDN

Usage

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

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 (68,676
css (7,241
vue (4,119
vuejs (1,087
animation (1,041
ui (1,008
plugin (765
component (551
ide (243
css3 (201
vue-components (191
loader (163
loading (107
progress (106
spinner (81
indicator (51
lib (22
animate (22

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