Vidéo: Step progress bar Tutorial, CSS. 2025
Les utilisateurs sont impatients, et parfois un processus prend un certain temps. Une barre de progression permet au développeur CSS3 de tenir l'utilisateur informé de la progression d'une tâche.
Les stratégies de programmation modernes tentent d'empêcher l'utilisateur d'attendre en effectuant des tâches plus longues en arrière-plan, mais parfois, un utilisateur ne peut pas continuer avant que la tâche ne soit terminée. C'est le moment où vous devez vous appuyer sur une barre de progression pour empêcher l'utilisateur d'arrêter le processus avant qu'il ne soit terminé.
L'exemple suivant montre comment utiliser une barre de progression. Dans ce cas, la barre de progression est mise à jour via une boucle de synchronisation. Chaque fois que le temporisateur expire, la barre de progression est mise à jour et le temporisateur est rétabli.
Le résultat est que l'indicateur de progression progresse de gauche à droite et que le chronomètre s'arrête finalement lorsque l'indicateur se déplace complètement vers la droite. (Vous pouvez trouver le code complet pour cet exemple dans le dossier Chapter 06Widgets du code téléchargeable sous Progressbar. HTML.)
// Configure la barre de progression. $ (function () {$ ("# Progress"). progressbar ({value: 0});}) // Crée une variable pour contenir l'objet timer. var Minuterie; // Crée une variable pour contenir le délai total. var Timeout; function StartTimer () {// Initialise le timeout. Timeout = 0; // Définit la valeur maximale de la barre de progression. $ ("# Progrès"). barre de progression ("option", "max", parseInt ($ ("# StartValue"). val ())); // Crée la variable de minuterie. Minuterie = fenêtre. setTimeout (UpdateTimer, 100);} function UpdateTimer () {// Récupère la valeur maximale. var MaxTime = $ ("# Progress"). barre de progression ("option", "max"); // Vérifie la fin du cycle de synchronisation. if (Timeout> = MaxTime) renvoie; // Mettre à jour la valeur du délai d'attente. Timeout + = 100; // Mettre à jour le pourcentage complété. $ ("# PercentDone"). texte (tour mathématique ((Timeout / MaxTime) * 100)); // Définit la valeur de la barre de progression. $ ("# Progrès"). barre de progression ("value", Timeout); // Crée la variable de minuterie. Minuterie = fenêtre. setTimeout (UpdateTimer, 100);}
La première tâche consiste à créer la barre de progression elle-même en appelant la barre de progression (). Notez que vous devez fournir une valeur initiale en entrée. Cependant, la configuration de la barre de progression n'est pas terminée - l'appel de StartTimer () plus tard effectuera des tâches de configuration supplémentaires.
La fonction StartTimer () est appelée lorsque l'utilisateur clique sur le bouton Start Timer du formulaire. Cette fonction initialise deux variables globales. Timer est un objet timer utilisé pour animer la barre de progression. Timeout est le temps écoulé en millisecondes.
Cette fonction configure également l'option max pour la barre de progression.L'indicateur est un pourcentage de la valeur actuelle et des propriétés de la valeur maximale. La valeur maximale est fournie par l'utilisateur via un contrôle, StartValue.
Chaque fois que le temporisateur expire, il appelle UpdateTimer (). UpdateTimer () obtient la valeur de temps maximale de la barre de progression et la place dans MaxTime. Il vérifie ensuite que Timeout est inférieur à MaxTime. Lorsque Timeout atteint finalement MaxTime, la barre de progression a atteint 100% et il est temps d'arrêter la minuterie.
L'étape suivante consiste à mettre à jour Timeout à la valeur suivante. Chaque itération avance Timeout de 100 millisecondes.
Après la mise à jour de Timeout, l'exemple met à jour le pourcentage à l'écran, qui est stocké dans un avec un identifiant de PercentDone. Il met également à jour l'attribut de valeur de la barre de progression afin que la barre passe à la position suivante.
Une minuterie se déclenche une seule fois. Pour créer la boucle suivante de l'itération, l'exemple doit réinitialiser Timer. Lorsque la prochaine attente de 100 millisecondes est terminée, UpdateTimer () est appelé à nouveau et le processus recommence.
