¿Cómo trabajar con progressbar en css3

Los usuarios son impacientes, ya veces un proceso toma un tiempo para completar. Una barra de progreso hace posible que el desarrollador CSS3 para mantener informados sobre el progreso de una tarea al usuario.

Estrategias de programación modernos tratan de mantener al usuario de la espera en absoluto mediante la realización de las tareas más largas en el fondo, pero a veces un usuario no puede proceder hasta que se realiza la tarea. Este es el tiempo que necesita para confiar en una barra de progreso para mantener al usuario de tratar de detener el proceso antes de que se complete.

El siguiente ejemplo muestra cómo utilizar una barra de progreso. En este caso, la barra de progreso se actualiza a través de un bucle de temporización. Cada vez que el tiempo se agota, la barra de progreso se actualiza, y el temporizador se restableció.

El resultado es que el indicador parcial de progreso se mueve de izquierda a derecha y que el temporizador con el tiempo se detiene cuando el indicador se mueve todo el camino a la derecha. (Usted puede encontrar el código completo para este ejemplo en el Capítulo carpeta 06 Widgets del código descargable como Progressbar.HTML.)

// Configurar la barra de progreso $ (function () {$ ("# Progreso") progressbar ({valor:. 0}) -}). // Crear una variable para contener el temporizador object.var Timer - // Cree un variable para mantener el tiempo de espera de funciones timeout.var total de startTimer () {// Inicializar el timeout.Timeout = 0 -.. // Establecer el valor bar máximo progreso $ ("# Progreso") ("opción" progressbar, "max ", parseInt ($ (" # StartValue ") val ().)) - // Cree el temporizador variable.Timer = window.setTimeout (UpdateTimer, 100) -} function UpdateTimer () {// Obtener el máximo value.var MaxTime = $ ("# Progreso") ("opción", "max") progressbar -. // Comprobar si el final de la cycle.if tiempo (Tiempo de espera> = MaxTime) return - // Actualizar el tiempo de espera value.Timeout + = 100 -.. // Actualizar el porcentaje completado $ ("# PercentDone") texto (Math.round ((Tiempo de espera / MaxTime) * 100)) -. // Establecer el valor de la barra de progreso $ ("# Progreso"). progressbar ("valor", Tiempo de espera) - // Cree el temporizador variable.Timer = window.setTimeout (UpdateTimer, 100) -}

La primera tarea es crear la propia barra de progreso llamando progressbar (). Observe que debe proporcionar un valor inicial como entrada. Sin embargo, la configuración de la barra de progreso no es completa - la llamada a startTimer () posteriormente realizar algunas tareas de configuración adicionales.

La función startTimer () se llama cuando el usuario hace clic en el botón Inicio del temporizador en el formulario. Esta función inicializa dos variables globales. Timer es un objeto de temporizador utilizado para animar la barra de progreso. Tiempo de espera es el tiempo transcurrido actual en milisegundos.

Esta función también configura la opción máximo para la barra de progreso. El indicador es un porcentaje del valor actual y las propiedades de valor max. El valor máximo es proporcionada por el usuario a través de una control, StartValue.

Cada vez que expira temporizador, llama UpdateTimer (). UpdateTimer () obtiene el valor máximo de tiempo en la barra de progreso y lo coloca en MaxTime. Luego verifica que tiempo de espera es de menos de MaxTime. Al tiempo de espera finalmente llega MaxTime, la barra de progreso ha alcanzado el 100 por ciento y es el momento para detener el temporizador.

El siguiente paso es actualizar Tiempo de espera al siguiente valor. Cada iteración avances de tiempo de espera de 100 milisegundos.

Después de actualizar Timeout, el ejemplo actualiza el porcentaje en pantalla, que se almacena en una con un id de PercentDone. También actualiza atributo de valor de la barra de progreso para que la barra se mueve a la siguiente posición.

A incendios temporizador sólo una vez. Para crear el siguiente bucle de la iteración, el ejemplo debe restablecer temporizador. Cuando la próxima espera 100 milisegundos es más, UpdateTimer () se llama de nuevo y el proceso comienza de nuevo.