Coder Social home page Coder Social logo

vue-loaders's Introduction

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>

vue-loaders's People

Contributors

hokid avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.