progress bar

<!doctype html>
<html>
<head>
<style type="text/css">
progress[value] {
  /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: progress-bar;
    width: 400px;
    height: 25px;
}
</style>
<script lang = "JavaScript">
function pro() {
    for(var x=1; x<51; x++) {
        document.write("<progress class = \"w3-padding w3-round\" value = \""+x+"\" max = \"50\">"+"</progress> <br/>");
    }
}
pro();
</script>
</head>
<body>
<progress class = "w3-padding w3-round" max = "100" value = "20"></progress>
</body>
</html>