# vue-custom-spinner

> > Only support Vue 2.0.

Latest version **0.1.0** (published 2022-06-27) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-06-27 |
| First published | 2022-06-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 140.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ahmed Reda |
| Maintainers | ahmed-reda |
| Keywords | vue, spinner, vue spinner, tailwindcss, vue2, vue-custom-spinner, loader, loading, svg |

## Links

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

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-06-27

## README

# Vue Svg Spinner

> Only support Vue 2.0.

Custom Vue spinner SVG component only one spinner

## Installation

### NPM

```bash
 npm install --save  vue-custom-spinner
```

### CommonJS

```js
var VueCustomSpinner = require('vue-custom-spinner');

new Vue({
  components: {
    'v-spinner': VueCustomSpinner,
    'spinner': VueCustomSpinner, // or
     ....
    // any name would you like to name to use  the component
  }
})
```

### ES6

```js
import VueCustomSpinner from 'vue-custom-spinner';

new Vue({
  components: {
    VueCustomSpinner,
  },
});
```

Or:

```js
Vue.component('v-spinner', require('vue-custom-spinner'));
```

### Browser globals

The `dist` folder contains `vue-custom-spinner.umd.js` and `vue-custom-spinner.umd.min.js`

```html
<script src="path/to/vue.js"></script>
<script src="path/to/vue-custom-spinner/dist/vue-custom-spinner.umd.js"></script>
// or
<script src="path/to/vue-custom-spinner"></script>
<script>
  var app = new Vue({
    el: '#app',
    components: {
      VueCustomSpinner,
    },
  });
</script>
```

## Usage

```html
<spinner :size="'sm'" width="2" />
```

You can customize the width and size with setting the props. All props have default value. You can control the spinner show/hidden with setting the loading prop.

## Props

| props | default | Type            |                                                                     |
| ----- | ------- | --------------- | ------------------------------------------------------------------- |
| size  | sm      | string          | Available sizes ['sm' , 'md' , 'lg' , 'xl'] you can set your custom |
| width | 3       | string - number | -                                                                   |

> want to see more features? [Contact me](https://own-portfolio-tree.vercel.app)

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