Progress 进度条

Display · Display component

Progress feedback.

On-demand importwbbb-ui/components/progress

Basic Usage

Example code

<script setup lang="ts">
import { WbbbProgress } from 'wbbb-ui/components/progress'
import 'wbbb-ui/styles/progress'
</script>

<template>
  <WbbbProgress />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultPrimarySuccessWarningDangerInfo

API Reference

Props

Property	Description	Type	Default	Required
color	Sets the primary display color.	string	''	No
percentage	Sets the progress percentage to display.	number	0	No
showText	Controls whether accompanying text is displayed.	boolean	true	No
status	Sets the semantic status used for display.	WbbbStatus	'default'	No
strokeWidth	Sets the thickness of the progress stroke.	number	12	No

Events

None

Slots

None

Two-way binding

Does not support v-model.

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.