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 1 month ago
JSON representation
Vue + loaders.css
- Host: GitHub
- URL: https://github.com/Hokid/vue-loaders
- Owner: Hokid
- License: mit
- Created: 2018-02-23T01:54:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:19:13.000Z (over 2 years ago)
- Last Synced: 2024-04-23T10:35:02.090Z (about 1 year ago)
- Topics: animate, animation, busy, component, css, css3, ide, indicator, lib, loader, loading, plugin, progress, spinner, ui, vue, vue-components, vuejs, wait, waiting
- Language: JavaScript
- Homepage:
- Size: 2.88 MB
- Stars: 171
- Watchers: 4
- Forks: 12
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
vue loaders
[< 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|``|
||ball-clip-rotate-multiple|``|
||ball-clip-rotate-pulse|``|
||ball-clip-rotate|``|
||ball-grid-beat|``|
||ball-grid-pulse|``|
||ball-pulse-rise|``|
||ball-pulse-sync|``|
||ball-pulse|``|
||ball-rotate|``|
||ball-scale-multiple|``|
||ball-scale-ripple-multiple|``|
||ball-scale-ripple|``|
||ball-scale|``|
||ball-spin-fade-loader|``|
||ball-triangle-path|``|
||ball-zig-zag-deflect|``|
||ball-zig-zag|``|
||cube-transition|``|
||line-scale-party|``|
||line-scale-pulse-out-rapid|``|
||line-scale-pulse-out|``|
||line-scale|``|
||line-spin-fade-loader|``|
||pacman|``|
||semi-circle-spin|``|
||square-spin|``|
||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
```