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>

OutPut:

css progress bar animation




Share this

Related Posts

Previous
Next Post »