Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Hokid/vue-loaders

Vue + loaders.css
https://github.com/Hokid/vue-loaders

animate animation busy component css css3 ide indicator lib loader loading plugin progress spinner ui vue vue-components vuejs wait waiting

Last synced: about 2 months ago
JSON representation

Vue + loaders.css

Lists

README 

        


    vue-loaders




vue loaders





    Version






  loaders.css + vue




[< previous version](https://github.com/Hokid/vue-loaders/tree/34e07c7c88e602423e497427e9f322692bd336d4)



## NPM



```bash

$ npm install -S vue-loaders

```



## CDN



* umd: https://unpkg.com/vue-loaders/dist/vue-loaders.umd.js

* esm/mjs: https://unpkg.com/vue-loaders/dist/vue-loaders.esm.js

* umd: `https://unpkg.com/vue-loaders/dist/loaders/`[loader name](#loaders)`.js`



## Usage



Before starting playing with loaders include some CSS to your bundle or page:



```javascript

import 'vue-loaders/dist/vue-loaders.css';

```

for bundle



```html



```

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`.



```html



```

`name` is name of loader. You will found all avaliable loaders names [here](#loaders).



To use this way you should import `vue-loaders` and add this as plugin:



```javascript

import VueLoaders from 'vue-loaders';

// add plugin

Vue.use(VueLoaders);

```

or on page

```html



  Vue.use(VueLoaders);



```



The second is to use separet loader component.



```html



```

You will found all avaliable loaders [here](#loaders).



Import separate loader component and then add this as plugin:



```javascript

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:



```javascript

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](#props) or use IDE tips, this library provide [web-types](https://github.com/JetBrains/web-types).



And some examples:



```javascript

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 = `



  

  


  



`;



new Vue({

  template

}).$mount('#app');

```



```javascript

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 = `

  

`;



new Vue({

  template

}).$mount('#app');

```



```javascript

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 = `

  

`;



new Vue({

  template

}).$mount('#app');

```



```javascript

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 = `

  

`;



new Vue({

  template

}).$mount('#app');

```



```javascript

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 = `

  

`;



new Vue({

  components: {

    [VueLoadersBallBeat.component.name]: VueLoadersBallBeat.component

  },

  template

}).$mount('#app');

```



If you want manage loader color from CSS outside follow this example:

```javascript

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 = `



  



`;



new Vue({

  template

}).$mount('#app');

```

[live example](https://codepen.io/Hokid/pen/xoaZew)



```HTML



  

    VueLoaders demo

    

    

    

  

  

    


      

      


      

    


    

      Vue.use(VueLoaders);

      new Vue().$mount('#app');

    

  



```



## Loaders



|Preview|Name|Component|

:-:|-|-|

|![ball-beat](assets/gifs/ball-beat.gif)|ball-beat|``|

|![ball-clip-rotate-multiple](assets/gifs/ball-clip-rotate-multiple.gif)|ball-clip-rotate-multiple|``|

|![ball-clip-rotate-pulse](assets/gifs/ball-clip-rotate-pulse.gif)|ball-clip-rotate-pulse|``|

|![ball-clip-rotate](assets/gifs/ball-clip-rotate.gif)|ball-clip-rotate|``|

|![ball-grid-beat](assets/gifs/ball-grid-beat.gif)|ball-grid-beat|``|

|![ball-grid-pulse](assets/gifs/ball-grid-pulse.gif)|ball-grid-pulse|``|

|![ball-pulse-rise](assets/gifs/ball-pulse-rise.gif)|ball-pulse-rise|``|

|![ball-pulse-sync](assets/gifs/ball-pulse-sync.gif)|ball-pulse-sync|``|

|![ball-pulse](assets/gifs/ball-pulse.gif)|ball-pulse|``|

|![ball-rotate](assets/gifs/ball-rotate.gif)|ball-rotate|``|

|![ball-scale-multiple](assets/gifs/ball-scale-multiple.gif)|ball-scale-multiple|``|

|![ball-scale-ripple-multiple](assets/gifs/ball-scale-ripple-multiple.gif)|ball-scale-ripple-multiple|``|

|![ball-scale-ripple](assets/gifs/ball-scale-ripple.gif)|ball-scale-ripple|``|

|![ball-scale](assets/gifs/ball-scale.gif)|ball-scale|``|

|![ball-spin-fade-loader](assets/gifs/ball-spin-fade-loader.gif)|ball-spin-fade-loader|``|

|![ball-triangle-path](assets/gifs/ball-triangle-path.gif)|ball-triangle-path|``|

|![ball-zig-zag-deflect](assets/gifs/ball-zig-zag-deflect.gif)|ball-zig-zag-deflect|``|

|![ball-zig-zag](assets/gifs/ball-zig-zag.gif)|ball-zig-zag|``|

|![cube-transition](assets/gifs/cube-transition.gif)|cube-transition|``|

|![line-scale-party](assets/gifs/line-scale-party.gif)|line-scale-party|``|

|![line-scale-pulse-out-rapid](assets/gifs/line-scale-pulse-out-rapid.gif)|line-scale-pulse-out-rapid|``|

|![line-scale-pulse-out](assets/gifs/line-scale-pulse-out.gif)|line-scale-pulse-out|``|

|![line-scale](assets/gifs/line-scale.gif)|line-scale|``|

|![line-spin-fade-loader](assets/gifs/line-spin-fade-loader.gif)|line-spin-fade-loader|``|

|![pacman](assets/gifs/pacman.gif)|pacman|``|

|![semi-circle-spin](assets/gifs/semi-circle-spin.gif)|semi-circle-spin|``|

|![square-spin](assets/gifs/square-spin.gif)|square-spin|``|

|![triangle-skew-spin](assets/gifs/triangle-skew-spin.gif)|triangle-skew-spin|``|



## Props



`vue-loaders` component support the following props:



 * `name` - name of loader(see [names](#loaders)).

 * `color` - loader color. May be any [css color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

 * `scale` - loader scale. May be any [scale number](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)

 



`vue-loaders-{loader name}` components(see [components](#loaders)) support the following props:



 * `color` - loader color. May be any [css color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

 * `scale` - loader scale. May be any [scale number](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)

 

 Examples:

 

```html



```



```html



```