Barra de progreso

LhProgress sirve para mostrar el progreso de completitud de una tarea o de una capacidad; admite las formas lineal y circular, con color y texto personalizables.

Uso básico

Barra de progreso lineal

60%

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

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

<script>
export default {}
</script>

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

Estado

normal / success / warning / exception; al llegar a 100 pasa a success automáticamente

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>

Color y texto personalizados

color admite cadena y función; format personaliza el texto

55%

70 puntos

<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} puntos`"
    />
  </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} puntos`"
    />
  </div>
</template>

Progreso circular

type a 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>

Sin texto

showText a 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	Descripción	Tipo	Predeterminado
percentage	Porcentaje de progreso; se clampa automáticamente si supera el rango [0, 100]	number	0
type	Forma	"line" | "circle"	'line'
status	Estado; con normal, al llegar a 100 pasa automáticamente a success	"normal" | "success" | "warning" | "exception"	'normal'
color	Color de la barra: cadena o función que devuelve un color según el porcentaje	string | ((percentage: number) => string)	—
strokeWidth	Ancho de línea en px (alto en line, grosor del trazo en circle)	number	6
width	Ancho del lienzo en modo circular, en px	number	126
showText	Si se muestra el texto	boolean	true
format	Formato personalizado del texto	(percentage: number) => string	—
sx	Props de maquetación rápida sx	LhSxProps	—

Slots

Slot	Descripción	Scope
text	Contenido del texto personalizado	{ percentage }

Accesibilidad

• El elemento raíz lleva role="progressbar" y aria-valuemin / aria-valuemax / aria-valuenow, de acuerdo con el patrón progressbar de WAI-ARIA
• aria-valuetext se sincroniza con el texto visible: por defecto es el porcentaje; al pasar format se anuncia el texto formateado (p. ej. «42 puntos»)
• El valor ya clampado se sincroniza con aria-valuenow, de modo que nunca hay anuncios fuera de rango

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/progress/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhProgressProps

export interface LhProgressProps {
  /** Porcentaje de progreso 0-100 (se clamp automáticamente si supera el rango) */
  percentage: number
  type?: LhProgressType
  status?: LhProgressStatus
  /** Color de la barra: cadena o función que devuelve un color según el porcentaje */
  color?: string | ((percentage: number) => string)
  /** Ancho de línea en px (alto en line, grosor del trazo en circle) */
  strokeWidth?: number
  /** Ancho del lienzo en modo circular, en px */
  width?: number
  showText?: boolean
  /** Formato personalizado del texto */
  format?: (percentage: number) => string
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

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

export type LhProgressType = 'line' | 'circle'

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

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