# vue-loading-template

> vue-loading

Latest version **1.3.2** (published 2018-12-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-loading-template
pnpm add vue-loading-template
yarn add vue-loading-template
bun add vue-loading-template
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2018-12-22 |
| First published | 2017-04-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 470 |
| Author | jkchao |
| Maintainers | vue-emoji |
| Keywords | vue, loading, template |

## Links

- npm: https://www.npmjs.com/package/vue-loading-template
- Repository: https://github.com/jkchao/vue-loading
- Homepage: https://github.com/jkchao/vue-loading#readme
- Issues: https://github.com/jkchao/vue-loading/issues
- npm.io page: https://npm.io/package/vue-loading-template

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.16
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^6.0.0
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^6.0.0

## Recent versions

- 1.3.2 (latest) — 2018-12-22
- 1.3.1 — 2018-12-22
- 1.3.0 — 2018-06-28
- 1.2.0 — 2018-06-24
- 1.1.1 — 2018-06-22
- 1.1.0 — 2018-06-22
- 1.0.5 — 2018-06-20
- 1.0.4 — 2018-06-20
- 1.0.3 — 2018-06-20
- 1.0.2 — 2018-06-19
- 1.0.1 — 2018-06-19
- 1.0.0 — 2018-06-19
- 0.1.7 — 2017-05-01
- 0.1.6 — 2017-04-30
- 0.1.5 — 2017-04-30
- … 13 more at https://npm.io/package/vue-loading-template/versions

## README

# vue-loading-template

--- 

Use SVG for loading.

Demo: https://jkchao.github.io/vue-loading/

## Start

```bash
npm install vue-loading-template --save
```

## Options

 <table>
 	<thead>
    <tr>
    <th>Prop</th>
    <th>Type</th>
    <th>Required</th>
    <th>Default</th>
    <th>Available values</th>
    </tr>
  </thead>
	<tbody>
    	<tr>
        <td>type</td>
        <td>String</td>
        <td>false</td>
        <td>balls</td>
        <td>balls, bars, beat, bubbles, cylon, spin, spiningDubbles, barsCylon</td>
        </tr>
        <tr>
        <td>color</td>
        <td>String</td>
        <td>false</td>
        <td>#5ac1dd</td>
        <td></td>
        </tr>
        <tr>
        <td>size</td>
        <td>Object</td>
        <td>false</td>
        <td>{ width: '30px', height: '30px' }</td>
        <td></td>
        </tr>
    </tbody>
</table>

## Example in SPA

```vue
 <template>
    <div>
       <h2>bars</h2>
       <vue-loading type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>    
    </div>
 </template>
  <script>
  import { VueLoading } from 'vue-loading-template'
  export default {
    name: 'app',
    components: {
      VueLoading
    }
  }
  </script>
```

Or you can install it in your `main.js`

```javascript
// main.js
import Vue from 'vue'
import VueLoading from 'vue-loading-template'
Vue.use(VueLoading, /** options **/)
```

If you use it in TypeScript, you can:

```typescript
// main.ts
import Vue from 'vue'
import vueLoading, { VueLoadingOptions } from 'vue-loading-template'

Vue.use<VueLoadingOptions>(VueLoading, /** options **/)
```

so, you will receive the tip about optional options.

![](http://ovshyp9zv.bkt.clouddn.com/WechatIMG98.jpeg)

## License

MIT

---
_Source: https://npm.io/package/vue-loading-template · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._