Simple Progress Bar with HTML and CSS

Simple Progress Bar with HTML and CSS

HTML

<progress id="progressBar" max="100" value="85"></progress>

CSS


progress { display:inline-block; width:px; height:20px; padding:15px 0 0 0; margin:0; background:none; border: 0; border-radius: 15px; text-align: left; position:relative; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; } progress::-webkit-progress-bar { height:30px; width:400px; margin:0 auto; background-color: #CCC; border-radius: 15px; box-shadow:0px 0px 6px #777 inset; } progress::-webkit-progress-value { display:inline-block; float:left; height:30px; margin:0px -10px 0 0; background: #262626; border-radius: 15px; box-shadow:0px 0px 6px #777 inset; } progress:after { margin:-26px 0 0 -7px; padding:0; display:inline-block; float:left; content: attr(value) '%'; }