Barre de progression

LhProgress affiche la progression d'une tâche ou le taux de remplissage d'une capacité, sous forme linéaire ou circulaire, avec couleurs et textes personnalisables.

Utilisation de base

Barre de progression linéaire

60%

<script setup lang="ts">
</script>

<template>
  <LhProgress :percentage="60" />
</template>

<script>
export default {}
</script>

<template>
  <LhProgress :percentage="60" />
</template>

États

normal / success / warning / exception, passage automatique à success à 100

100%

80%

40%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="100" />
    <LhProgress :percentage="80" status="warning" />
    <LhProgress :percentage="40" status="exception" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="100" />
    <LhProgress :percentage="80" status="warning" />
    <LhProgress :percentage="40" status="exception" />
  </div>
</template>

Couleurs et textes personnalisés

color accepte une chaîne ou une fonction, format personnalise le libellé

55%

70 points

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="55" color="#B8860B" />
    <LhProgress
      :percentage="70"
      :color="(p: number) => `hsl(${p * 1.2}, 60%, 45%)`"
      :format="(p: number) => `${p} points`"
    />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="55" color="#B8860B" />
    <LhProgress
      :percentage="70"
      :color="(p: number) => `hsl(${p * 1.2}, 60%, 45%)`"
      :format="(p: number) => `${p} points`"
    />
  </div>
</template>

Progression circulaire

type défini sur circle

75%

100%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; align-items: center; gap: 24px">
    <LhProgress type="circle" :percentage="75" />
    <LhProgress type="circle" :percentage="100" :width="100" :stroke-width="8" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 24px">
    <LhProgress type="circle" :percentage="75" />
    <LhProgress type="circle" :percentage="100" :width="100" :stroke-width="8" />
  </div>
</template>

Sans texte

showText défini sur false

<script setup lang="ts">
</script>

<template>
  <LhProgress :percentage="45" :show-text="false" />
</template>

<script>
export default {}
</script>

<template>
  <LhProgress :percentage="45" :show-text="false" />
</template>

API

Props

Prop	Description	Type	Valeur par défaut
percentage	Pourcentage de progression, automatiquement ramené dans [0, 100]	number	0
type	Forme	"line" | "circle"	'line'
status	État, en normal la valeur 100 bascule automatiquement sur success	"normal" | "success" | "warning" | "exception"	'normal'
color	Couleur de la barre : chaîne ou fonction renvoyant une couleur selon le pourcentage	string | ((percentage: number) => string)	—
strokeWidth	Largeur du trait en px (hauteur pour line, épaisseur du trait pour circle)	number	6
width	Largeur du canevas en mode circulaire, en px	number	126
showText	Afficher le texte	boolean	true
format	Formatage personnalisé du texte	(percentage: number) => string	—
sx	Props de mise en page sx	LhSxProps	—

Slots

Slot	Description	Portée
text	Contenu textuel personnalisé	{ percentage }

Accessibilité

• L'élément racine porte role="progressbar" ainsi que aria-valuemin / aria-valuemax / aria-valuenow, conformément au pattern progressbar de WAI-ARIA
• aria-valuetext reste synchronisé avec le libellé visible : pourcentage par défaut, ou texte formaté lorsque format est fourni (ex. « 42 points »)
• La valeur ramenée dans l'intervalle est synchronisée avec aria-valuenow, évitant tout annonce hors plage

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/progress/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhProgressProps

export interface LhProgressProps {
  /** Pourcentage de progression 0-100 (automatiquement ramené dans l'intervalle) */
  percentage: number
  type?: LhProgressType
  status?: LhProgressStatus
  /** Couleur de la barre : chaîne ou fonction renvoyant une couleur selon le pourcentage */
  color?: string | ((percentage: number) => string)
  /** Largeur du trait en px (hauteur pour line, épaisseur du trait pour circle) */
  strokeWidth?: number
  /** Largeur du canevas en mode circulaire, en px */
  width?: number
  showText?: boolean
  /** Formatage personnalisé du texte */
  format?: (percentage: number) => string
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhProgressType _{(provenant de @lh-ui/share/core/progress)}

export type LhProgressType = 'line' | 'circle'

LhProgressStatus _{(provenant de @lh-ui/share/core/progress)}

export type LhProgressStatus = 'normal' | 'success' | 'warning' | 'exception'