Saltar al contenido principal

ProgressBar

Abrir en ChatGPT
Sombra dwc-progressbar 24.02
Java API

El componente ProgressBar representa visualmente el estado de finalización de una operación. A medida que avanza el trabajo, un rectángulo se llena gradualmente para reflejar el porcentaje actual. La barra también puede mostrar una representación textual de su valor y admite tanto estados determinados como indeterminados para tareas con duración conocida o desconocida.

Usos

El componente ProgressBar es útil para visualizar el estado de finalización de tareas. Admite:

  • Valores mínimos y máximos configurables.
  • Modo indeterminado para tareas en curso sin un final definido.
  • Opciones para visibilidad de texto, animación y diseños rayados para una mejor retroalimentación visual.

El siguiente ejemplo muestra una barra de progreso rayada y animada con controles para iniciar, pausar y reiniciar:

Mostrar Código

Estableciendo valores

El componente ProgressBar permite establecer y obtener su valor actual, límites mínimos y máximos.

ProgressBar bar = new ProgressBar();
bar.setMin(0);
bar.setMax(100);
bar.setValue(50);

Orientación

El ProgressBar puede orientarse horizontal o verticalmente.

Mostrar Código

Estado indeterminado

El ProgressBar admite un estado indeterminado para tareas con tiempo de finalización desconocido.

Mostrar Código

Texto y visibilidad del texto

Por defecto, cuando se crea, la barra de progreso muestra el porcentaje completado en el formato XX%. Usando el método setText(), puedes usar el marcador de posición {{x}} para obtener el valor actual como un porcentaje. Además, puedes usar el marcador de posición {{value}} para obtener el valor actual en bruto.

ProgressBar bar = new ProgressBar(15, "Descargando: {{x}}%");

Estilo

Temas

El componente ProgressBar viene con temas integrados para un estilizado rápido sin el uso de CSS. Estos temas son estilos predefinidos que se pueden aplicar a botones para cambiar su apariencia y presentación visual. Ofrecen una forma rápida y consistente de personalizar la apariencia de las ProgressBars en toda una aplicación.

Mostrar Código

Loading...

Mejores prácticas

  • Usa Valores Mínimos y Máximos Apropiados: Establece los valores mínimos y máximos para reflejar con precisión el rango de la tarea.
  • Actualiza el Progreso Regularmente: Actualiza continuamente el valor de progreso para proporcionar retroalimentación en tiempo real a los usuarios.
  • Utiliza el Estado Indeterminado para Duraciones Desconocidas: Usa el estado indeterminado para tareas con duraciones impredecibles para indicar progreso en curso.
  • Muestra Texto para Mejor Retroalimentación del Usuario: Muestra texto en la barra de progreso para ofrecer un contexto adicional sobre el progreso de la tarea.