Se Connecter
Contact

Exercices HTML CSS

Exercice 3 HTML et CSS Corrigé S4

Exercice 3 : Barre de progression animée

Objectif : Créer une barre de progression animée avec HTML et CSS.

Instructions :

  • Créez une section sur votre page pour afficher la progression d'une tâche.
  • Ajoutez une barre de progression horizontale avec une largeur de 100%.
  • Utilisez CSS pour animer la barre de progression, la remplissant progressivement de gauche à droite sur une période de temps (par exemple, 5 secondes).

Points à évaluer :

  • Bonne utilisation des animations CSS pour la progression.
  • Utilisation des pseudo-éléments pour styliser la barre de progression.

Étape 1 : Création de la structure HTML

Vous pouvez créer une section simple contenant une barre de progression. Voici l'HTML de base :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barre de progression animée</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <h2>Progression de la tâche</h2>
        <div class="progress-bar-container">
            <div class="progress-bar"></div>
        </div>
    </div>

</body>
</html>

Étape 2 : Stylisation avec CSS

Ensuite, nous allons créer le CSS pour styliser la barre de progression et ajouter l'animation. Vous utiliserez les pseudo-éléments pour styliser la barre.

/* Style général */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

h2 {
    color: #333;
    margin-bottom: 20px;
}

/* Conteneur de la barre de progression */
.progress-bar-container {
    width: 100%;
    max-width: 600px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

/* Barre de progression */
.progress-bar {
    width: 0;
    height: 100%;
    background-color: #4caf50;
    border-radius: 15px 0 0 15px;
    animation: progressAnimation 5s ease-in-out forwards;
}

/* Animation de la barre de progression */
@keyframes progressAnimation {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

 

Ajouter un commentaire

Veuillez vous connecter pour ajouter un commentaire.

Pas encore de commentaires.

Exercices

QCM Informatique

series HTML CSS

Exercices