Progreso

Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.

Los indicadores de progreso informan a los usuarios acerca del estado de procesos activos, tales como cargar una aplicación, enviar un formulario o guardar actualizaciones.

• Los indicadores circulares determinados llenan la trayectoria invisible circular con color, a medida que el indicador se mueve desde los 0 a los 360 grados.
• Los indicadores indeterminados visualizan un tiempo de espera no determinado.

Los indicadores determinados muestran cuánto durará una operación.

Circular

Circular indeterminate

Circular determinate

Interactive integration

Circular with label

Lineal

Linear indeterminate

Linear determinate

Linear buffer

Linear with label

Rangos no estándar

Los componentes de progreso aceptan un valor en el rango 0 - 100. Esto simplifica las cosas para los usuarios lectores de la pantalla, donde estos son los valores mínimos / máximos por defecto. Sin embargo, algunas veces puedes estar trabajando con fuentes de datos donde los valores están fuera de este rango. Aquí mostramos como puede transformar fácilmente un valor en cualquier rango a una escala de 0 - 100:

// MIN = valor mínimo esperado
// MAX = valor máximo esperado
// Función para normalizar los valores (MIN / MAX podrían estar integrados)
const normalise = value => (value - MIN) * 100 / (MAX - MIN);

// Componente ejemplo que utiliza la función `normalise` en el punto de dibujo.
function Progress(props) {
  return (
    <React.Fragment>
      <CircularProgress variant="determinate" value={normalise(props.value)} />
      <LinearProgress variant="determinate" value={normalise(props.value)} />
    </React.Fragment>
  )
}

Customized progress

Here are some examples of customizing the component. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

Demorando la aparición

Hay 3 límites importantes que conocer acerca del tiempo de respuesta. El efecto dominó del componente ButtonBase garantiza que el usuario sienta que el sistema está reaccionando instantáneamente. Normalmente, no se necesita una retroalimentación especial durante retrasos entre 0.1 y 1.0 segundo. Después de 1.0 segundo, puede desplegar un cargador para mantener el flujo de pensamiento del usuario sin interrupciones.

Limitaciones

High CPU load

Bajo cargas pesadas, puede perder la animación del trazo o ver anchos de anillos aleatorios de CircularProgress. Debería ejecutar operaciones de procesamiento intensivas en un trabajador web o por lotes para no bloquear el hilo de dibujo (render).

When it's not possible, you can leverage the disableShrink property to mitigate the issue. See this issue.

High frequency updates

The LinearProgress uses a transition on the CSS transform property to provide a smooth update between different values. The default transition duration is 200ms. In the event a parent component updates the value prop too quickly, you will at least experience a 200ms delay between the re-render and the progress bar fully updated.

If you need to perform 30 re-renders per second or more, we recommend disabling the transition:

.MuiLinearProgress-bar {
  transition: none;
}

IE11

The circular progress component animation on IE11 is degraded. The stroke dash animation is not working (equivalent to disableShrink) and the circular animation wobbles. You can solve the latter with:

.MuiCircularProgress-indeterminate {
  animation: circular-rotate 1.4s linear infinite;
}

@keyframes circular-rotate {
  0% {
    transform: rotate(0deg);
    /* Fix IE11 wobbly */
    transform-origin: 50% 50%;
  }
  100% {
    transform: rotate(360deg);
  }
}

API

• <CircularProgress />
• <LinearProgress />