Inicio rápido: agregar controles de progreso (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Los controles Progress permiten indicar que la aplicación está trabajando, como por ejemplo, descargando imágenes, cargando archivos o procesando datos. Estos son los distintos estilos de control Progress y cómo se pueden agregar a una aplicación de Windows en tiempo de ejecución con JavaScript.

Requisitos previos

Damos por hecho que sabes crear una aplicación de Windows en tiempo de ejecución básica con JavaScript. Para obtener ayuda para crear tu primera aplicación, consulta Crear la primera aplicación de Windows en tiempo de ejecución con JavaScript. Para obtener ayuda para crear los primeros controles y agregar los controladores de eventos, consulta Inicio rápido: Agregar controles y controladores de eventos.

Estilos de control Progress

Hay tres estilos de controles progress que indican al usuario cuando se conoce la cantidad de trabajo pendiente de completar, cuando no se conoce dicha cantidad y si la tarea es modal: el estilo de la barra de progreso determinada, el estilo de la barra de progreso indeterminada y el estilo de círculo indeterminado.

Barra de progreso determinada: muestra el progreso que ha realizado la aplicación. A medida que avanza el trabajo, un color de relleno se expande de izquierda a derecha hasta que rellene por completo la barra de progreso.
Barra de progreso indeterminada: indica que los usuarios pueden interactuar con la interfaz de usuario mientras la tarea continua. En la animación, aparecen puntos en la izquierda que se mueven hacia la derecha siguiendo una pista hasta que alcanzan el final de la pista y desaparecen.
Círculo de progreso indeterminado (solo Windows): indica que la actividad del usuario se bloquea hasta que la aplicación complete la tarea; es decir, la actividad es modal. En la animación, varios puntos se mueven en el sentido de las agujas del reloj en un círculo.

 

Agregar una barra de progreso determinada

Una barra de progreso determinada muestra el progreso que ha realizado la aplicación. A medida que avanza el trabajo, la barra se va llenando. Si puedes calcular la cantidad de trabajo restante en tiempo, bytes, archivos u otra unidad de medida cuantificable, usa una barra de progreso determinada. Para obtener más información sobre cuándo usar una barra de progreso determinada, consulta las Directrices y lista de comprobación para controles de progreso.

La barra de progreso proporciona 3 propiedades para configurar y determinar el progreso:

Propiedad	Descripción
max	Un número que especifica el valor del trabajo completado. El valor predeterminado es 1.0.
value	Un número que especifica el progreso actual. Si vas a mostrar el progreso de una descarga de archivo, este valor podría ser el número de bytes descargados (y después estableces max en el número total de bytes pendientes de descargar).
position	(Solo lectura). El indicador de progreso actual, que es value dividido por max.

 

Para crear una barra de progreso determinada

Para crear una barra de progreso determinada, puedes crear un elemento de progreso y configurar su propiedad value. Si no quieres usar el valor de trabajo completado predeterminado (1.0), puedes configurar la propiedad max para cambiarlo. En este ejemplo se crea una barra de progreso determinada y se establece su value en 30 y su max en 100. La barra de progreso resultante muestra que el progreso se completó al 30%.

<progress id="determinateProgressBar" value="30" max="100"></progress>

Para actualizar el valor de una barra de progreso determinada

En el ejemplo anterior se mostró cómo especificar el valor de una barra de progreso en el marcado. En una aplicación real, puedes usar JavaScript para actualizar la barra de progreso como una respuesta a algún indicador de progreso. Por ejemplo, si la barra de progreso indica la cantidad de archivos que se descargaron, tienes que actualizar el valor cada vez que se descargue otro archivo.

En este ejemplo se actualiza el valor de una barra de progreso.

var progressBar = document.getElementById("determinateProgressBar");
progressBar.value = value;

Agregar una barra de progreso indeterminada

Cuando no puedas calcular cuánto trabajo queda para finalizar una tarea y la tarea no bloquea la interacción del usuario, usa una barra de progreso indeterminada. En lugar de mostrar una barra que se rellena conforme se avanza, una barra de progreso indeterminada muestra una animación de puntos que se mueven de izquierda a derecha. Para obtener más información sobre cuándo usar una barra de progreso indeterminada, consulta las Directrices y lista de comprobación para controles de progreso.

Para crear una barra de progreso indeterminada

Para crear una barra de progreso indeterminada, crea un elemento de progreso sin especificar un valor o un máximo.

<!-- Create an indeterminate progress bar -->
<progress></progress>

Agregar un círculo de progreso indeterminado (solo Windows)

Cuando no puedas calcular cuánto trabajo queda para finalizar una tarea y la tarea bloquea la interacción del usuario, usa un círculo de progreso indeterminado. Un círculo de progreso indeterminado muestra una secuencia animada de puntos moviéndose en círculo. Para obtener más información sobre cuándo usar un círculo de progreso indeterminada, consulta las Directrices y lista de comprobación para controles de progreso.

Para crear un círculo de progreso indeterminado

Para crear un círculo de progreso indeterminado, crea un elemento de progreso sin especificar un valor o un máximo, y establece su clase en win-ring.

<progress class="win-ring"></progress>

(La clase win-ring es uno de los estilos proporcionados por la biblioteca de Windows para JavaScript).

En el siguiente ejemplo se muestra cómo crear un círculo de progreso indeterminado que también muestra texto.

<label class="progressRingText">
    <progress class="win-ring withText"></progress>Processing</label>

Estos son los estilos CSS que acompañan al ejemplo anterior.

progress.withText
{
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}

/* Text style for a label for the progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* Text style for a label for a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* The margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}

Resumen y pasos siguientes

Aprendiste cómo crear distintos tipos de control Progress.

En el siguiente tema, Cómo aplicar estilo a los controles de progreso, aprenderás más sobre cómo usar clases CSS y de WinJS para aplicar estilo a los controles progress.

Después, lee las Directrices y lista de comprobación para controles de progreso, que profundiza más sobre cuándo y cómo usar el control progress.

Temas relacionados

progress

Cómo aplicar estilo a los controles de progreso

Directrices y lista de comprobación para controles de progreso