Comment travailler avec ProgressBar en CSS3

Les utilisateurs sont impatients, et parfois un processus prend un certain temps à compléter. Une barre de progression permet au développeur de CSS3 pour garder l'utilisateur informé de l'avancement d'une tâche.

Stratégies de programmation modernes essaient de garder l'utilisateur d'attendre tout en effectuant des tâches plus longues dans le fond, mais parfois un utilisateur ne peut pas procéder jusqu'à ce que la tâche est accomplie. Ceci est le temps que vous devez appuyer sur une barre de progression pour garder l'utilisateur de tenter d'arrêter le processus avant qu'il se termine.

L'exemple suivant montre comment utiliser une barre de progression. Dans ce cas, la barre de progression est mis à jour par une boucle de chronométrage. Chaque fois que le délai expire, la barre de progression est mis à jour, et la minuterie est rétabli.

Le résultat est que les indicateur de progression de la pièce se déplace de gauche à droite et que la minuterie cesse finalement lorsque l'indicateur se déplace tout le chemin à droite. (Vous pouvez trouver le code complet pour cet exemple dans le répertoire Chapitre 06 Widgets dossier de la Code téléchargeable comme Progressbar.HTML).

// Configurer la barre de progression $ (function () {$ ("# Progress") progressbar ({valeur:. 0}) -}). // Création d'une variable pour contenir la minuterie object.var Timer - // Créer une variable pour contenir l'timeout.var totale Timeout fonction StartTimer () {// Initialisation de la timeout.Timeout = 0 -.. // Définissez la valeur maximale de la barre de progression $ ("# Progress") progressbar ("option", "max ", parseInt ($ (" # StartValue ") val ().)) - // Création de la minuterie variable.Timer = window.setTimeout (UpdateTimer, 100) -} function UpdateTimer () {// Obtenir le maximum de value.var MaxTime = $ ("# Progress") progressbar ("option", "max") -. // Vérifier la fin de la cycle.if de synchronisation (Timeout> = MaxTime) retour - // Mettre à jour le Timeout value.Timeout + = 100 -.. // Mettre à jour le pourcentage achevé $ ("# PercentDone") texte (Math.round ((Timeout / MaxTime) * 100)) -. // Définir la valeur de barre de progression $ ("# Progress"). progressbar («valeur», Timeout) - // Création de la minuterie variable.Timer = window.setTimeout (UpdateTimer, 100) -}

La première tâche est de créer la barre de progression se en appelant progressbar (). Notez que vous devez fournir une valeur initiale comme entrée. Toutefois, la configuration de la barre de progression est pas complète - l'appel à StartTimer () plus tard, va effectuer certaines tâches de configuration supplémentaires.

La fonction StartTimer () est appelée lorsque l'utilisateur clique sur le bouton Start Timer sur le formulaire. Cette fonction initialise deux variables globales. Timer est un objet timer utilisé pour animer la barre de progression. Timeout est le temps écoulé actuel, en millisecondes.

Cette fonction configure également l'option max de la barre de progression. L'indicateur est un pourcentage de la valeur du courant et les propriétés de valeur max. La valeur maximale est fournie par l'utilisateur à travers un contrôle, StartValue.

Chaque fois que l'expiration de la minuterie, il appelle UpdateTimer (). UpdateTimer () obtient la valeur de temps maximum de la barre de progression et le place dans MaxTime. Il vérifie ensuite que Timeout est inférieure à MaxTime. Lorsque Timeout atteint finalement MaxTime, la barre de progression a atteint 100 pour cent et il est temps pour arrêter le chronomètre.

La prochaine étape est de mettre à jour Timeout à la valeur suivante. Tous les progrès d'itération Timeout de 100 millisecondes.

Après la mise à jour temporisation, l'exemple met à jour l'écran pourcentage, qui est stocké dans un avec un id de PercentDone. Il met également à jour l'attribut de valeur de la barre de progression de sorte que la barre se déplace à la position suivante.

A incendies de minuterie une seule fois. Pour créer la boucle suivante de l'itération, l'exemple doit remettre le minuteur. Lorsque la prochaine attente de 100 millisecondes est terminée, UpdateTimer () est appelée de nouveau et le processus recommence.