vue-loaders

Vue component wrappers for loaders.css (https://github.com/ConnorAtherton/loaders.css)

Usage no npm install needed!

<script type="module">
  import vueLoaders from 'https://cdn.skypack.dev/vue-loaders';
</script>

README

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>