How To Make A Basic ProgressBar Animation In CSS3
In This CSS Tutorial we will see How To Make A ProgressBar Animation Using Keyframes In CSS3 In Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title> CSS Progress Bar </title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{background-color: #ddd;width: 250px}
span{background-color: red;height: 25px;display: block;
animation: prog 2s linear forwards}
@keyframes prog{
0%{width:0%}
100%{width:100%;background-color:green}
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
OutPut:
