4.1.4 • Published 3 years ago

vue-loaders v4.1.4

Weekly downloads
1,487
License
MIT
Repository
github
Last release
3 years ago

< 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

PreviewNameComponent
ball-beatball-beat<vue-loaders-ball-beat/>
ball-clip-rotate-multipleball-clip-rotate-multiple<vue-loaders-ball-clip-rotate-multiple/>
ball-clip-rotate-pulseball-clip-rotate-pulse<vue-loaders-ball-clip-rotate-pulse/>
ball-clip-rotateball-clip-rotate<vue-loaders-ball-clip-rotate/>
ball-grid-beatball-grid-beat<vue-loaders-ball-grid-beat/>
ball-grid-pulseball-grid-pulse<vue-loaders-ball-grid-pulse/>
ball-pulse-riseball-pulse-rise<vue-loaders-ball-pulse-rise/>
ball-pulse-syncball-pulse-sync<vue-loaders-ball-pulse-sync/>
ball-pulseball-pulse<vue-loaders-ball-pulse/>
ball-rotateball-rotate<vue-loaders-ball-rotate/>
ball-scale-multipleball-scale-multiple<vue-loaders-ball-scale-multiple/>
ball-scale-ripple-multipleball-scale-ripple-multiple<vue-loaders-ball-scale-ripple-multiple/>
ball-scale-rippleball-scale-ripple<vue-loaders-ball-scale-ripple/>
ball-scaleball-scale<vue-loaders-ball-scale/>
ball-spin-fade-loaderball-spin-fade-loader<vue-loaders-ball-spin-fade-loader/>
ball-triangle-pathball-triangle-path<vue-loaders-ball-triangle-path/>
ball-zig-zag-deflectball-zig-zag-deflect<vue-loaders-ball-zig-zag-deflect/>
ball-zig-zagball-zig-zag<vue-loaders-ball-zig-zag/>
cube-transitioncube-transition<vue-loaders-cube-transition/>
line-scale-partyline-scale-party<vue-loaders-line-scale-party/>
line-scale-pulse-out-rapidline-scale-pulse-out-rapid<vue-loaders-line-scale-pulse-out-rapid/>
line-scale-pulse-outline-scale-pulse-out<vue-loaders-line-scale-pulse-out/>
line-scaleline-scale<vue-loaders-line-scale/>
line-spin-fade-loaderline-spin-fade-loader<vue-loaders-line-spin-fade-loader/>
pacmanpacman<vue-loaders-pacman/>
semi-circle-spinsemi-circle-spin<vue-loaders-semi-circle-spin/>
square-spinsquare-spin<vue-loaders-square-spin/>
triangle-skew-spintriangle-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:

<vue-loaders name="ball-beat" color="black" scale="1.2"></vue-loaders>
<vue-loaders-ball-beat color="black" scale="1"></vue-loaders-ball-beat>
vuevuejsvue-loadersloaderloaders.cssanimationanimatespinnerloadingcssuiprogresscomponentlibindicatorbusywaitidleplugin
@infinitebrahmanuniverse/nolb-vue-l@everything-registry/sub-chunk-3085dynamic-characteristicmcdsmcdstestthrust-uitsl-vuetsl-vue-temptoplogis-test-libuncle-argon@tempotem/vue_components
4.1.4

3 years ago

4.1.3

3 years ago

4.1.2

3 years ago

4.1.1

4 years ago

4.1.0

4 years ago

4.0.0

4 years ago

4.0.0-alpha.2

4 years ago

3.3.1

4 years ago

4.0.0-alpha.1

4 years ago

4.0.0-alpha.0

4 years ago

3.3.0

4 years ago

3.2.0

4 years ago

3.1.0

4 years ago

3.0.2

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.0.0

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.0.1

6 years ago