Progress

The Progress component provides you with progress indicators.

Live Examples

Storybook: components-progress--default

Storybook: components-progress--variants

Storybook: components-progress--animated

Examples

import { Progress } from '@nostromo/ui-core'
 
export default function ProgressExample() {
  return (
    <div className="space-y-4">
      <Progress value={33} />
      <Progress value={66} />
      <Progress value={100} />
    </div>
  )
}

With Label

import { Progress } from '@nostromo/ui-core'
 
export default function ProgressWithLabel() {
  return (
    <div className="space-y-2">
      <div className="flex justify-between text-sm">
        <span>Upload progress</span>
        <span>75%</span>
      </div>
      <Progress value={75} />
    </div>
  )
}

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Progress value (0-100)
`max`	`number`	`100`	Maximum value

Tooltip Skeleton