Have ideas to improve npm?Join in the discussion! »

    vue-loaders
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.4 • Public • Published
    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>

    Install

    npm i vue-loaders

    DownloadsWeekly Downloads

    2,160

    Version

    4.1.4

    License

    MIT

    Unpacked Size

    163 kB

    Total Files

    64

    Last publish

    Collaborators

    • avatar