@58fe/p5/src/doc/ring.md

pc端vue组件

## Ring
局部loading动态效果，当区块获取数据时，提升用户体验效果

### 引入

```javascript
import { ring } from '@58fe/p5';
```

### 基本用法

:::demo 
```html
<ring :center="false"></ring>

<script>
	module.exports = {
		data() {
			return{
			}
		}
	}
</script>
```

:::

### 动画&垂直居中

默认为垂直居中状态，需要父级设置`position`为relative/absolute
:::demo 
```html
<div class="ring-box">
	<ring type="fill"></ring>
</div>
<style lang="scss">
.ring-box{
	position: relative;
	width: 100%;
	height: 100px;
}
</style>

```

:::



### 参数

| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | ------------- | ------------------- | ------------ | ------- |
| type         | 动画效果       | String              |  circle/fill  |center |
| center       | 是否垂直居中    | Boolean             |  true/false   | true |