# <zui-progress-bar />

简单而又潜力无限的水平进度条组件。





## 🍏 在线演示

**[💻 点我在浏览器里预览 https://uni.imgozi.cn/zui-progress-bar/](https://uni.imgozi.cn/zui-progress-bar/?utm_source=uni-plugin-market&utm_medium=readme&utm_campaign=zui-progress-bar&utm_id=uni-plugin)**

PS: 启动浏览器预览需要打开手机模器

**[📱 扫码体验](https://uni.imgozi.cn/zui-progress-bar/?utm_source=uni-plugin-market&utm_medium=readme&utm_campaign=zui-progress-bar&utm_id=uni-plugin)**

<img src="https://uni.imgozi.cn/zui-progress-bar/static/preview-qr.png?_rnd=90" width="128" />



## 🍐 快速上手：

```html
<zui-progress-bar :value="0.66" />
```



## 🍎 兼容性说明

| 兼容性 | 小程序 | 版本 | 说明 |
| :---: | :--- | :--- | ---- |
| | 快应用 | 0.1.0 |  |
| ✅ | 微信小程序 | 0.1.0 |  |
| ✅ | 支付宝小程序 | 0.1.0 |  |
| | 百度小程序 | 0.1.0 |  |
| | 字节小程序 | 0.1.0 |  |
| ✅ | QQ小程序 | 0.1.0 |  |
| ✅ | 钉钉小程序 | 0.1.0 |  |
| | 快手小程序 | 0.1.0 |  |
| ✅ | 飞书小程序 | 0.1.0 |  |
| | 京东小程序 | 0.1.0 |  |


☕🍻欢迎有兴趣的小伙伴一起完善小程序兼容性。🍻☕




## 🍊 参数

#### 🍒 value: `number`

进度，百分比。范围：[0, 1]


#### 🍒 width: `number`

组件宽度

#### 🍒 height: `number`

组件高度


#### 🍒 disableValue: `boolean`

隐藏百分比

#### 🍒 unit: `string`

百分比单位符号。默认：%


#### 🍒 type: ` 'left' |'center' |'right' |'outside-left' |'outside-right' |'follow-left' |'follow-right' `

进度条类型

| 值 | 说明 |
| --- | --- |
| left | 百分比显示在进度条左侧，叠加在进度条上方。 |
| center | 百分比显示在进度条中间，叠加在进度条上方。 |
| right | 百分比显示在进度条右侧，叠加在进度条上方。 |
| outside-left | 百分比显示在进度条左侧，在进度条外部。 |
| outside-right | 百分比显示在进度条右侧，在进度条外部。 |
| follow-left | 百分比显示在进度条头部左侧，叠加在进度条上方。 |
| follow-right | 百分比显示在进度条头部右侧，叠加在进度条上方。 |


#### 🍒 rounded: `boolean`

使用圆角。


#### 🍒 color: `string`

文字颜色。合法的 CSS 颜色值


#### 🍒 invertColor: `boolean`

反转颜色。


#### 🍒 texture: `string | string[]`

设置进度条前景与背景纹理。

当 texture 值为字符串或数组只有一个值时，只设置前景，背景为透明。

> tips：纹理可以是任何合法的 css background 值



## 🍓 支持

如果组件对您有帮助，请不吝打赏。肥宅快乐水🥤是创作动力！🥤🥤🥤

<span class="banner">
<span class="surport">
<a class="btn btn-support " data-toggle="modal" data-target="#support_modal" style="border: 1px solid #ec4d4d;letter-spacing: 1px;">
  🍓🍇🍉  喜欢就打赏一下  🍒🍑🥭
</a>
</span>
</span>