Progress

Import

Progress: The main component to display an progress.

Usage

"use client"
 
import * as React from "react"
import { Progress } from "@openlite/ui"
 
export function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)
 
  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])
 
  return <Progress value={progress} className="w-[60%]" />
}

Examples

Primary

"use client"
 
import * as React from "react"
import { Progress } from "@openlite/ui"
 
export function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)
 
  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])
 
  return <Progress variant="primary" value={progress} className="w-[60%]" />
}

Success

"use client"
 
import * as React from "react"
import { Progress } from "@openlite/ui"
 
export function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)
 
  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])
 
  return <Progress variant="success" value={progress} className="w-[60%]" />
}

Warn

"use client"
 
import * as React from "react"
import { Progress } from "@openlite/ui"
 
export function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)
 
  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])
 
  return <Progress variant="warn" value={progress} className="w-[60%]" />
}

Error

"use client"
 
import * as React from "react"
import { Progress } from "@openlite/ui"
 
export function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)
 
  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])
 
  return <Progress variant="error" value={progress} className="w-[60%]" />
}

Size

"use client"
 
import * as React from "react"
import { Progress } from "@openlite/ui"
 
export function ProgressDemo() {
  return (
    <div className="flex flex-col gap-8">
    <Progress variant="primary" value={66} className="w-[60%]" />
    <Progress variant="success" value={66} className="w-[60%]" size="md" />
    <Progress variant="error" value={66} className="w-[60%]" size="lg" />
    </div>
    )
}

API

Progress Props

Props	Type	Description
`variant`	`'default' \| 'primary' \| 'success' \| 'warn' \| 'error'`	The variant of the progress.
`size`	`'sm' \| 'md' \| 'lg'`	The size of the progress.

Progress

On this page