Démarrage rapide : ajout de contrôles de progression (HTML)

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Les contrôles de progression permettent d’indiquer que votre application est en train d’effectuer une tâche (téléchargement d’images, chargement de fichiers ou traitement de données, par exemple). Les différents styles de contrôle de progression et la procédure à suivre pour les ajouter à une application Windows Runtime en JavaScript sont indiqués ci-après.

Prérequis

Nous partons du principe que vous savez créer une application élémentaire Windows Runtime en JavaScript. Pour obtenir de l’aide sur la création de votre première application, voir Création de votre première application Windows Runtime en JavaScript. Pour obtenir de l’aide sur la création de vos premiers contrôles et sur l’ajout de gestionnaires d’événements, voir Démarrage rapide : ajout de contrôles et de gestionnaires d’événements.

Styles de contrôle de progression

Il existe trois styles de contrôles progress indiquant à l’utilisateur que la quantité de travail restante est connue, qu’elle ne l’est pas et si la tâche est modale : la barre de progression déterminée, la barre de progression indéterminée et l’anneau de progression indéterminée.

Barre de progression déterminée : affiche l’état d’avancement de la tâche en cours de réalisation par l’application. À mesure que le travail progresse, une couleur de remplissage s’étend de la gauche vers la droite jusqu’à ce qu’elle remplisse la barre de progression.
Barre de progression indéterminée : indique à l’utilisateur qu’il peut interagir avec l’interface utilisateur pendant que la tâche se poursuit. Dans l’animation, des points apparaissent à gauche et se déplacent vers la droite le long d’une ligne jusqu’à la fin de celle-ci, puis disparaissent.
Anneau de progression indéterminée  : indique que l’activité utilisateur est bloquée jusqu’à ce que l’application ait terminé la tâche ; autrement dit, l’activité est modale. Dans l’animation, plusieurs points se déplacent en dessinant un anneau dans le sens des aiguilles d’une montre.

Ajout d’une barre de progression déterminée

Une barre de progression déterminée affiche l’état d’avancement de la tâche en cours de réalisation par l’application. La barre se remplit à mesure que la tâche progresse. Utilisez une barre de progression déterminée si vous pouvez évaluer la part de la tâche restant à réaliser en termes de temps, d’octets, de fichiers ou de toute autre unité de mesure quantifiable. Pour plus d’informations sur le moment le plus opportun auquel utiliser une barre de progression déterminée, voir Recommandations et liste de vérification pour les contrôles de progression.

La barre de progression fournit 3 propriétés qui permettent de définir et de déterminer la progression :

Pour créer une barre de progression déterminée

Pour créer une barre de progression déterminée, vous créez un élément de progression et définissez sa propriété value. Si vous ne souhaitez pas utiliser la valeur d’achèvement par défaut (1.0), vous pouvez en définir une autre à l’aide de la propriété max. Cet exemple crée une barre de progression déterminée et définit sa propriété value sur 30 et sa propriété max sur 100. La nouvelle barre de progression affiche que la tâche est réalisée à 30 %.

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

Pour mettre à jour la valeur d’une barre de progression déterminée

Dans l’exemple précédent, vous avez vu comment définir la valeur d’une barre de progression dans le balisage. Dans une application réelle, vous utilisez JavaScript pour mettre à jour la valeur de la barre de progression en réponse à un indicateur de progression. Par exemple, si la barre de progression indique le nombre de fichiers ayant été téléchargés, sa valeur est mise à jour dès qu’un autre fichier a été téléchargé.

L’exemple suivant met à jour la valeur de la barre de progression.

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

Ajout d’une barre de progression indéterminée

Utilisez une barre de progression indéterminée lorsque vous ne pouvez pas évaluer la part de la tâche restant à réaliser et que la tâche n’empêche pas les actions utilisateur. Au lieu d’afficher une barre qui se remplit à mesure que la tâche progresse, une barre de progression indéterminée affiche une série de points animés qui se déplacent de gauche à droite. Pour plus d’informations sur le moment le plus opportun auquel utiliser une barre de progression indéterminée, voir Recommandations et liste de vérification pour les contrôles de progression.

Pour créer une barre de progression indéterminée

Pour créer une barre de progression indéterminée, créez un élément de progression sans indiquer de valeur ni de valeur maximale.

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

Ajout d’un anneau de progression indéterminée (Windows uniquement)

Utilisez un anneau de progression indéterminée lorsque vous ne pouvez pas évaluer la part de la tâche restant à réaliser et que la tâche empêche les actions utilisateur. Un anneau de progression indéterminée affiche une série de points animés qui se déplacent en cercle. Pour plus d’informations sur le moment le plus opportun auquel utiliser un anneau de progression indéterminée, voir Recommandations et liste de vérification pour les contrôles de progression.

Pour créer un anneau de progression indéterminée

Pour créer un anneau de progression indéterminée, créez un élément de progression sans indiquer de valeur ni de valeur maximale et définissez sa classe sur win-ring.

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

(La classe win-ring correspond à l’un des styles fournis par la bibliothèque Windows pour JavaScript.)

L’exemple suivant montre comment créer un anneau de progression indéterminée qui affiche également du texte.

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

Les styles CSS qui accompagnent l’exemple précédent sont les suivants.

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;
}

Récapitulatif et étapes suivantes

Vous avez appris à créer différents types de contrôles de progression.

Dans la rubrique suivante, Comment appliquer un style aux contrôles de progression, vous allez découvrir comment utiliser les classes WinJS et CSS pour appliquer un style à vos contrôles progress.

Après cela, consultez la rubrique Recommandations et liste de vérification pour les contrôles de progression, qui explique plus en détail quand et comment utiliser le contrôle progress.

Rubriques associées

progress

Comment appliquer un style aux contrôles de progression

Recommandations et liste de vérification pour les contrôles de progression