[Résolu] Animer une barre de progression (click bouton) - cours : Créez des animations CSS modernes par Sn_p - page 1

Bonjour,
Je suis rendu ici dans le cours (j'ai mis le bon paragraphe dans le lien). Le but de cet partie du cours est d'animer une barre de progression (réalisé avec des div) lorsqu'on clique sur un bouton (lui aussi fait avec des div)

voici mon code SCSS :

// Resources :
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
$main-color: #15DFA6;

body {
	color: white;
	font-family: 'Montserrat', sans-serif;
	text-align: center
}


.container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column; 
}

.btn {
	background-color: $main-color;
	padding: 1.5rem 3rem;
	border-radius: 50px;
	cursor:pointer;
    &:hover {
		& + progress {
			& > .progress__bar {
				transform: scaleX(1);
			}
		}
    }
}

.progress {
	width: 75%;
	height: 10px;
	background-color: white;
	border: solid black 1px;
	padding: 3px 4px ;
	&__bar {
		background-color: $main-color;
		height: 100%;

		transform: scaleX(0);
		transition: transform 1000ms cubic-bezier(.32,0,.07,1);
	}
}

Ainsi que mon code HTML:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css"/>
		<meta charset="utf-8" />
		<title>Page de tests</title>
	</head>
	<body>
		<br /><br /><br /><br /><br />
		<div id="container">
			<div class="btn">Charger !</div><br>
			<div class="progress">
				<div class="progress__bar"></div>
			</div>
		</div>
	</body>
</html>

La barre devrait s'agrandir (au moins) depuis le milieu comme dans le gif (dans le cours), quelqu'un peut m'éclairer sur mon erreur ?

Merci d'avance !

-
Edité par Sn_p 1 juillet 2020 à 10:09:55

Animer une barre de progression (click bouton)

cours : Créez des animations CSS modernes

Animer une barre de progression (click bouton)

Supprimer

Modérer

Signaler le message aux modérateurs