L'indicateur de chargement — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 10)

L'indicateur de chargement

Variables, transitions, animations et projet · niveau 2

Énoncé

Pendant le chargement du catalogue, la page affiche « Chargement du catalogue… » précédé d'une roue : un cercle de 1,5rem à bordure crème de 4 pixels, dont le quart supérieur est ocre.

Faire tourner la roue d'un tour complet toutes les 0,8 secondes, à vitesse constante, indéfiniment.
Pour les visiteurs qui réduisent les animations, la remplacer par une variation lente d'opacité.
Pourquoi le paragraphe porte-t-il role="status" et la roue aria-hidden="true" ?

Corrigé


.roue {
  width: 1.5rem;
  height: 1.5rem;
  border: 4px solid #f3e3d3;
  border-top-color: #e07a1f;
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .roue {
    animation: tourner 0.8s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roue {
    animation: respirer 2s ease-in-out infinite alternate;
  }
}

@keyframes tourner {
  to {
    rotate: 1turn;
  }
}

@keyframes respirer {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.4;
  }
}

linear donne une vitesse constante ; l'étape from absente vaut la rotation normale, 0. L'unité turn vaut un tour (360 degrés). alternate fait aller et revenir l'opacité. Chromium calcule tourner ou respirer selon la préférence simulée. Le rôle status fait annoncer le texte par les lecteurs d'écran sans interrompre le visiteur ; la roue, pur décor, est masquée pour eux : l'information est dans le texte, pas dans le mouvement.