CSS3 - Simple ProgressBar Animation

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>

Need More ?

C#, JAVA,PHP, Programming ,Source Code