Hanzo GUI

Progress

Show percent completion with a progress bar

  • Sizable, themeable, animatable.
  • Compound component API for complete control.

Installation

Progress is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/progress

Usage

The value property controls the percent, but you can override it by adjusting the x property.

import { Button, Progress } from '@hanzo/gui'

export default () => (
  <Progress value={60}>
    <Progress.Indicator transition="bouncy" />
  </Progress>
)

API Reference

Progress

Progress extends ThemeableStack, getting Gui standard props, plus:

PropTypeDefaultRequired
size"small" | "large"--
valuenumber | null--
maxnumber--
unstyledboolean--

Progress.Indicator

Progress.Indicator extends ThemeableStack, getting Gui standard props.

PropTypeDefaultRequired
unstyledboolean--

Last updated on

On this page