Download to read offline
AS
Uploaded byAnurag Sachdeva
DOCX, PDF49 views
Dynamic progress bar
The document describes a dynamic progress bar created with HTML and CSS. It uses CSS to style the progress bar, container, and button. JavaScript is used to update the width of the progress bar div on button click to simulate progress. The progress bar fills from left to right upon clicking the button to trigger the JavaScript function.
More Related Content
Recently uploaded
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 4pxgrey; } .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>