# @wines/spin

> The spin @wines

Latest version **2.0.0** (published 2025-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wines/spin
pnpm add @wines/spin
yarn add @wines/spin
bun add @wines/spin
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-04-01 |
| First published | 2021-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=16.0.0 |
| Dependencies | 3 |
| Unpacked size | 17.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

- npm: https://www.npmjs.com/package/@wines/spin
- Repository: https://gitlab.itcjf.com/wines/spin
- npm.io page: https://npm.io/package/@wines/spin

## Dependencies (3)

- [@wines/core](https://npm.io/package/@wines/core.md) 2.0.0
- [@wines/styles](https://npm.io/package/@wines/styles.md) 2.0.0
- [@wines/animation-group](https://npm.io/package/@wines/animation-group.md) 2.0.0

## Recent versions

- 2.0.0 (latest) — 2025-04-01
- 2.0.0-next.7 (next) — 2025-04-01
- 2.0.0-next.6 — 2025-03-06
- 2.0.0-next.5 — 2025-03-05
- 2.0.0-next.4 — 2025-03-05
- 2.0.0-next.3 — 2025-03-04
- 2.0.0-next.2 — 2025-02-28
- 2.0.0-next.1 — 2025-02-27
- 2.0.0-next.0 — 2025-02-27
- 1.5.1 — 2023-03-07
- 1.5.0 — 2022-11-22
- 1.4.0 — 2022-02-23
- 1.3.5 — 2021-12-03
- 1.3.4 — 2021-09-26
- 1.3.2 — 2021-09-24
- … 2 more at https://npm.io/package/@wines/spin/versions

## README

# `@wines/spin`

# Spin 加载中

用于页面和区块的加载中状态。

## 使用指南

### 在 page.json 中引入组件

```json
{
  "navigationBarTitleText": "Spin",
  "usingComponents": {
    "wux-button": "@wines/button",
    "wux-spin": "@wines/spin"
  }
}
```

### 示例

```xml
<view class="page">
	<view class="page__hd">
		<view class="page__title">Spin</view>
		<view class="page__desc">加载中</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<view class="sub-title">Default</view>
		<wux-spin wux-class="spin" />
		<view class="sub-title">Size</view>
		<wux-spin wux-class="spin" size="small" />
		<wux-spin wux-class="spin" size="default" />
		<wux-spin wux-class="spin" size="large" />
		<view class="sub-title">Nested</view>
		<wux-spin nested spinning="{{ spinning }}" tip="Loading...">
			<view>微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp</view>
			<view>微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp</view>
			<view>微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp</view>
		</wux-spin>
		<wux-button block type="light" bind:click="onClick">Switch State</wux-button>
	</view>
</view>

```

```ts
import './index.less';
Page({
  onClick() {
    this.setData({
      spinning: !this.data.spinning,
    });
  },
```

## API

### Spin props

| 参数       | 类型      | 描述                                                                    | 默认值              |
| ---------- | --------- | ----------------------------------------------------------------------- | ------------------- |
| prefixCls  | `string`  | 自定义类名前缀                                                          | wux-spin            |
| classNames | `any`     | 过渡的类名，更多内置过渡效果请参考 [AnimationGroup](animation-group.md) | wux-animate--fadeIn |
| tip        | `string`  | 自定义描述文案                                                          | -                   |
| size       | `string`  | 组件大小，可选值为 small、default、large                                | default             |
| spinning   | `boolean` | 是否为加载中状态，仅当 nested 为 true 时生效                            | true                |
| nested     | `boolean` | 是否作为包裹元素                                                        | false               |

### Spin slot

| 名称 | 描述       |
| ---- | ---------- |
| -    | 自定义内容 |

### Spin externalClasses

| 名称      | 描述         |
| --------- | ------------ |
| wux-class | 根节点样式类 |

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