# vue-custom-loading

> Custom full overlay loading with spinner for Vue. Select light or dark overlay and insert your spinner.

Latest version **1.0.0** (published 2018-01-25) · MIT license · 0 weekly downloads

## Install

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

## 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 | 1.0.0 |
| Published | 2018-01-25 |
| First published | 2018-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Monastyrev Ivan |
| Maintainers | ikloster |
| Keywords | loading, loader, vue, spinner, full loading |

## Links

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

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.2

## Recent versions

- 1.0.0 (latest) — 2018-01-25

## README

# Vue Custom Loading
Custom full overlay loading with spinner for Vue. Select light or dark overlay and insert your spinner.

```
<template>
    <Loading :show="show"></Loading>
</template>
<script>    
    import Loading from 'vue-custom-loading';
    
    export default {
      components: {
        Loading
      },
       data(){
           return {
               show: false,
           }
       }
    }
</script>
<style scoped>

</style>
```

## Install

### NPM

```
npm install vue-custom-loading --save
```

### YARN

```
yarn add vue-custom-loading
```

## Webpack

| Command   | Options                               |
| :----     | :------                               |
| dev       | webpack-dev-server --env development  |
| build     | static build                          |

## Examples

![Alt Text](https://github.com/ikloster03/vue-custom-loading/raw/master/img/example.gif)


[vue-custom-loading example](https://ikloster03.github.io/vue-custom-loading/)

## Settings

| Option    | Type      | Default   | Description                                  |
| :------   | :----     | :-------  | :-----------                                 |
| `show`    | Boolean   | false     | Show or hide loader                          |
| `overlay` | String    | 'light'   | Color of overlay: 'light', 'dark' or 'none'  |

## Custom spinner

Example of custom loader (spinner).

```
<template>
    <Loading 
        :show="show"
        :overlay="overlay"
    >
    <div slot="loader">
        <div class="special-loader-style">Loading ...</div>
    <div>
    </Loading>
</template>
<script>    
    import Loading from 'vue-custom-loading';
    
    export default {
      components: {
        Loading
      },
       data(){
           return {
               show: false,
               overlay: 'dark,
           }
       }
    }
</script>
<style scoped>
    .special-loader-style {
        color: #fff;
    }
</style>
```

You can add your own loader (spinner) in slot 'loader'. 
Although you can add loader's styles in tag style.

## Contact me

- Site: [ikloster03.github.io](https://ikloster03.github.io)
- E-mail: <ikloster@yandex.ru>
- Telegram channel: [t.me/ikloster95](https://t.me/ikloster95)

## [CHANGELOG](https://github.com/ikloster03/vue-custom-loading/blob/master/CHANGELOG.md)


## [LICENSE](https://github.com/ikloster03/vue-custom-loading/blob/master/LICENSE)

Copyright (c) 2017 Monastyrev Ivan <ikloster@yandex.ru>. Licensed under the [MIT license](https://github.com/ikloster03/vue-custom-loading/blob/master/LICENSE).

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