Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Progress } from "@hua-labs/hua";

65%
40%

default
success
warning
error
info

Processing...55%

sm
md
lg

0%

valuenumber0docs:components.progress.props.value
maxnumber100docs:components.progress.props.max
size"sm" | "md" | "lg""md"docs:components.progress.props.size
variant"default" | "success" | "warning" | "error" | "info" | "glass""default"docs:components.progress.props.variant
showValuebooleanfalsedocs:components.progress.props.showValue
animatedbooleantruedocs:components.progress.props.animated
stripedbooleanfalsedocs:components.progress.props.striped
labelstring-docs:components.progress.props.label
descriptionstring-docs:components.progress.props.description

docs:common.basicUsage
import { Progress } from '@hua-labs/hua';

// Basic progress bar
<Progress value={50} />

// With label and value display
<Progress value={75} label="Upload Progress" showValue />
docs:components.progress.demo.variants
// Success variant
<Progress value={100} variant="success" />

// Warning variant
<Progress value={60} variant="warning" />

// Error variant
<Progress value={30} variant="error" />

// Glass variant (for overlays)
<Progress value={50} variant="glass" />
docs:components.progress.demo.striped
// Striped pattern
<Progress value={70} striped />

// Striped with color
<Progress value={80} variant="info" striped />

  • •role: docs:components.progress.accessibility.role
  • •aria-valuenow: docs:components.progress.accessibility.ariaValuenow
  • •aria-valuemin/max: docs:components.progress.accessibility.ariaValueminmax
  • •aria-labelledby: docs:components.progress.accessibility.ariaLabel
SkeletonLoadingSpinner