Comment appliquer un style aux contrôles de progression (HTML)

  • Article

[ 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 ]

Découvrez comment utiliser les feuilles de style CSS (Cascading Style Sheets) et de la Bibliothèque Windows pour JavaScript pour appliquer un style aux contrôles progress.

Ce que vous devez savoir

Technologies

Prérequis

  • Nous supposons que vous savez comment créer les trois différents types de contrôles progress : la barre de progression déterminée, la barre de progression indéterminée et l’anneau de progression déterminée. Pour en savoir plus sur l’ajout des différents types de contrôles progress, voir Démarrage rapide : ajout de contrôles de progression.

Propriétés CSS utiles

Les propriétés CSS suivantes sont particulièrement utiles pour appliquer un style au contrôle progress :

  • width
    Spécifie la largeur du contrôle de progression. Pour un anneau de progression indéterminée, la largeur et la hauteur doivent être identiques.

  • height
    Spécifie la hauteur du contrôle de progression. Pour un anneau de progression indéterminée, la largeur et la hauteur doivent être identiques.

  • color
    Spécifie la couleur de la partie barre de la barre de progression déterminée et la couleur des points de la barre de progression indéterminée et de l’anneau de progression indéterminée.

    Cet exemple crée une barre progress déterminée avec une barre bleue.

    <progress value="0.4" style="color: blue"  />

Pseudo-éléments pour appliquer un style aux contrôles de progression

Le contrôle progress fournit les pseudo-éléments suivants, que vous pouvez utiliser comme sélecteurs pour appliquer un style à des parties spécifiques du contrôle :

  • ::-ms-fill
    Applique un ou plusieurs styles à la partie barre des contrôles progress déterminés et spécifie l’animation des contrôles de progression indéterminée.

    Tous les styles sont appliqués à la partie barre de la barre de progression déterminée, à l’exception de la propriété de style animation-name, qui contrôle l’animation de la barre et de l’anneau de progression indéterminée.

    Cet exemple affiche un contrôle progress sous forme d’anneau de progression indéterminée.

    

/* Show the ring animation. This setting only works when
   you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }

(Pour plus d’informations sur les différentes façons de combiner des pseudo-éléments et d’autres sélecteurs, voir Présentation des sélecteurs CSS.)

Pseudo-classes pour appliquer un style aux contrôles de progression

Ce contrôle prend en charge les pseudo-classes suivantes que vous pouvez utiliser comme sélecteurs pour appliquer un style au contrôle lorsqu’il se trouve dans certains états.

  • :indeterminate
    Applique un ou plusieurs styles à un contrôle progress à l’état indéterminé.

    Cet exemple définit un style pour des contrôles de barres progress indéterminées.

    
progress:indeterminate {
    /* styling here */
}

(Pour plus d’informations sur les différentes façons de combiner des pseudo-classes et d’autres sélecteurs, voir Présentation des sélecteurs CSS.)

Classes CSS WinJS pour appliquer un style aux contrôles de progression

WinJS fournit plusieurs classes CSS pour appliquer un style au contrôle progress.

Pour utiliser ces classes, affectez le nom de la classe comme attribut class du contrôle. Vous pouvez assigner plusieurs classes à un élément ; il vous suffit pour cela de séparer les noms de classes à l’aide d’un espace. Cet exemple applique les classes win-ring et win-large à un contrôle progress.

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

WinJS fournit les classes CSS suivantes pour appliquer un style au contrôle progress :

  • win-error
    Suspend une barre progress déterminée et l’affiche avec le style d’erreur.

  • win-large
    Affecte une grande taille au contrôle progress. Utilisez ce style pour les opérations modales en plein écran.

  • win-medium
    Affecte une taille moyenne au contrôle progress. Si vous affichez un anneau de progression à côté d’un texte 20 points, utilisez cette classe.

  • win-paused
    Suspend la progression d’une barre progress déterminée.

  • win-ring
    Affiche le contrôle progress sous forme d’anneau de progression indéterminée. Vous devez spécifier la largeur et la hauteur du contrôle progress en définissant les propriétés width et height ou à l’aide de la classe win-medium ou win-large.

Rubriques associées

Démarrage rapide : ajout de contrôles de progression

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

Présentation des sélecteurs CSS