vue3-spinkit/README.md

A collection of loading indicators animated with CSS for VueJS 3

# vue3-spinkit

<p align="center">
  <a href="https://www.npmjs.com/package/vue3-spinkit"><img src="https://img.shields.io/npm/dm/vue3-spinkit.svg?sanitize=true" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/vue3-spinkit"><img src="https://img.shields.io/npm/v/vue3-spinkit.svg?sanitize=true" alt="Version"></a>
  <a href="https://www.npmjs.com/package/vue3-spinkit"><img src="https://img.shields.io/npm/l/vue3-spinkit.svg?sanitize=true" alt="License"></a>
</p>

<p align="center">
  <a href="https://orcid.org/0009-0009-0993-7629"><img src="https://img.shields.io/badge/iD-0009--0009--0993--7629-f5f5f5" alt="Orcid"></a>
  <a href="https://ko-fi.com/kwy"><img src="https://badgen.net/badge/icon/kofi?icon=kofi&label=kwy&color=F16061" alt="Kwy"></a>

<!-- [![iD: 0009-0009-0993-7629](https://img.shields.io/badge/0009--0009--0993--7629-blue.svg?style=for-the-badge&logo=orcid)](https://orcid.org/0009-0009-0993-7629) [![Ko-fi](https://img.shields.io/badge/ko--fi-F16061?style=for-the-badge&logo=kofi&logoColor=f5f5f5)](https://ko-fi.com/kwy) -->

</p>

<p align="center">

![Depfu](https://img.shields.io/depfu/kangwuyi/vue3-spinkit) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/kangwuyi/vue3-spinkit) [![Code Coverage](https://img.shields.io/codecov/c/github/kangwuyi/vue3-spinkit)](https://codecov.io/github/kangwuyi/vue3-spinkit) [![Code Coverage](https://github.com/kangwuyi/vue3-spinkit/actions/workflows/node.js.yml/badge.svg)](https://github.com/kangwuyi/kangwuyi/vue3-spinkit)


</p>




# pre
fork from https://github.com/TonPC64/vue-spinkit（vue 2）

file Unpacked Size from 410 kB to ~80kb

## Installation

```bash
# use yarn
yarn add vue3-spinkit
# use npm
npm install --save vue3-spinkit
```

## How to use
```js
import { createApp } from 'vue'
import Spinner from 'vue3-spinkit'
import 'vue3-spinkit/build/vue3-spinner.css'
import App from './App.vue'

const app = createApp(App)
app.use(Spinner)
app.mount('#app')
```

## In file vue
```html
<imp-spinner name="circle" color="red" />
```

## Props

| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| name | string | 'three-bounce' | specify spinner to use (defaults to line-scale-pulse-out-rapid). |
| color | string |  | programmatically set the color of the spinners; this can either be a hex value or a color word. |
| noFadeIn | boolean | false | set use fade in |
| fadeIn | string | 'full' | set the time before the spinner fades in. Have 'full', 'half' and 'quarter' |
| className | string | | add a custom classname to the outer div |
| width | string | | set width of spinner |
| height | string | | set heght of spinner |


<!-- # 发包过程
```
npm run tsc
api-extractor run
npm run bundle
npm publish
```

构建过程需要注意 `[pageage.json].typings` 与构建输出结果中的文件保持一致 -->