# vue-loading-status

> this is vue loading

Latest version **2.0.3** (published 2018-01-17) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2018-01-17 |
| First published | 2017-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | lijianhui |
| Maintainers | lijianhui |
| Keywords | loading, loading-status, vue-loading, vue-loading-status |

## Links

- npm: https://www.npmjs.com/package/vue-loading-status
- Repository: 'https://github.com/lijianhuiGit/vue-loading-status.git'
- npm.io page: https://npm.io/package/vue-loading-status

## Dependencies (12)

- [vue](https://npm.io/package/vue.md) ^2.5.8
- [less](https://npm.io/package/less.md) ^2.7.3
- [webpack](https://npm.io/package/webpack.md) ^3.8.1
- [babel-core](https://npm.io/package/babel-core.md) ^6.26.0
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.7
- [vue-loader](https://npm.io/package/vue-loader.md) ^13.5.0
- [less-loader](https://npm.io/package/less-loader.md) ^4.0.5
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.2
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [style-loader](https://npm.io/package/style-loader.md) ^0.19.0
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.6.1
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.5.8

## Recent versions

- 2.0.3 (latest) — 2018-01-17
- 2.0.2 — 2017-12-26
- 2.0.1 — 2017-12-24
- 2.0.0 — 2017-12-24
- 1.0.3 — 2017-11-28
- 1.0.2 — 2017-11-28
- 1.0.1 — 2017-11-28
- 1.0.0 — 2017-11-28

## README

# vue-loading-status

This is a vue loading

![loading icon](https://raw.githubusercontent.com/lijianhuiGit/vue-loading-status/master/src/icon/demo.png)

## Usage
```javascript

npm install vue-loading-status --save

import loadingStatus from 'vue-loading-status'

loadingStatus.config.loadingMsg = 'loading'
loadingStatus.config.successMsg = 'success'
loadingStatus.config.emptyMsg = 'empty'
loadingStatus.config.errorMsg = 'error'

Vue.use(loadingStatus)

```

```html
<template>
    <ul v-if="productList.length">
        <li v-for="item in productList">item product</li>
    </ul>
    <loading-status v-else :status="productListStatus"></loading-status>

    <!-- other option
    <loading-status 
        :status="productListStatus"
        :height="200"
        :global="[true / false]"
    >
    </loading-status>
    -->

</template>
```
```javascript
<script>
export default {
    data () {
        return {
            productList: [],
            productListStatus: null
        }
    },
    created () {
        this.productListStatus = [true, 'loading...']
        axios.get('/get-product-list')
            .then(res => {
                if (res.data) {
                    this.productList = res.data
                    this.productListStatus = [1, 'success']
                }
                else {
                    this.productListStatus = [0, 'empty']
                }
            })
            .catch(err => {
                this.productListStatus = [-1, 'error']
            })
    }
}
</script>
```

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