Progress

Une barre de progression.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

progress.tsx

'use client';import { useState } from 'react';import { Button } from '@/components/ui/button';import { Progress, ProgressIndicator, ProgressTrack } from '@/components/ui/progress';export default function Demo() {  const [value, setValue] = useState(30);  return (    <div className="flex w-72 flex-col items-center gap-4">      <Progress value={value}>        <ProgressTrack>          <ProgressIndicator />        </ProgressTrack>      </Progress>      <Button        onClick={() => setValue((current) => (current >= 100 ? 0 : current + 25))}        size="sm"        variant="outline"      >        Advance      </Button>    </div>  );}

Animation

La largeur transite en 240 ms (ease-in-out-strong). C'est la seule propriété de mise en page animée avec l'accordéon : Base UI l'applique en ligne.

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add progress

Ou depuis le paquet npm :

import { Progress } from '@whoa-studio/ui/progress';

Exports : Progress, ProgressTrack, ProgressIndicator.