Reddot UI Library

Docs
Progress

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/progress.json

Utilisation

import { Progress } from "@/components/ui/progress"
 
// Exemple basique
<Progress value={33} />
 
// Démo avec progression dynamique
"use client"
 
import * as React from "react"
import { Progress } from "@/components/ui/progress"
 
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%]" />
}

API Reference

Progress

Affiche un indicateur montrant le progrès d'une tâche.

PropTypeDefaultDescription
valuenumber-La valeur du progrès (entre 0 et 100).
maxnumber100La valeur maximum pour le progrès.
getValueLabel(value: number, max: number) => string-Une fonction pour obtenir un label accessible pour la valeur actuelle.

Références