html css yazılım doğrultusu | Cevap #6050

arkadaşlar öncelikle selamlar ben css ve html yeni başladım ilk başlamama rahmen bazı kodları yanlış yazdığımı düşünüyorum bende örnek olsun dite bir css kodu yazdım sizce css kodlarım duğrumu?


.progress{
	display:block;
	width:300px;
	box-sizing:border-box;
	height:30px;
	background-color:#ccc;
	border-radius:30px;
	position:relative;
	overflow:hidden;
	margin:auto;
	

}

.progress:before{
	content:'';
	width:0px;
	height:100%;
	position:absolute;
	background-color:#ca1;
	animation:animation-pro 7s;
	

	
}

.progress span{
	z-index:999px;
	position:absolute;
	top:7px;
	left:5px;
	color:#a00;
	font-family:arial,sans-serif;
	
}

@keyframes animation-pro{
	0%{
		width:0px;
		border-radius:0px;
		
	}
	50%{
		width:50%;
		border-radius:0px;
	}
	100%{
	width:100%;
	border-radius:30px;
	}
}

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>progress bars</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<div class="progress">
	 <span>loading...</span>
	</div>
</body>
</html>