Recommended
More Related Content
Similar to Dynamic progress bar
Similar to Dynamic progress bar (20)
Recently uploaded
Recently uploaded (20)
Dynamic progress bar
- 1. Dynamic Progress Bar Code:- CSS <style> .sach { width:0%; height:30px; background:red; transition:width4s; border-radius:50px; } .anurag{ margin:20px; background-color:#CCC; padding:30px; border-radius:8px; } .jerry{ background-color:#FFF; border-radius:50px; border:10px solid#999; border-style:dashed;
- 2. } .btn{ background-color:#999; width:150px; height:60px; cursor:pointer; border:0; padding:15px; font-size:16px; } .btn:hover{ box-shadow:3px3.5px 1px 4px grey; } .btn:active{ transform:translateY(3px); box-shadow:2px0px 1px 1px grey; } </style> HTML <html> <head></head> <title>ProgressBar</title> <body> <h1 align="center">ProgressBar</h1> <divclass="anurag"> <divclass="jerry"> <divid="annu"class="sach"></div> </div> </div> <divalign="center"> <buttonclass="btn"type="button" onclick="document.getElementById('annu').style.width='100%'">ClickMe!</button> </div> </body> </html>