HTML CSS Progressbars

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

      @media only screen and (min-width: 600px) {
        body {
          margin-right:100px;
          margin-left:100px;
          margin-top: 0;
        }
      }
      .flex{
        display: grid;
        grid-row-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }
      .progress-bar {
        background-color: #aaaaaa;
        height: 25px;
        padding: 5px;
        margin: 10px 0;
        border-radius: 5px;
        box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
      }

      .progress-bar span {
        display: inline-block;
        height: 100%;
        border-radius: 3px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        transition: width .4s ease-in-out;
      }

      .blue span {
        background-color: #34c2e3;
      }

      .red span {
        background-color: #f22222;
        background-image: linear-gradient(top, #fecf23, #fd9215);
      }

      .orange span {
        background-color: #fecf23;
        background-image: linear-gradient(top, #fecf23, #fd9215);
      }

      .green span {
        background-color: #a5df41;
        background-image: linear-gradient(top, #a5df41, #4ca916);
      }
      .stripes span {
        background-size: 30px 30px;
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%,
        transparent 25%,
        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
        transparent 75%, transparent);
        animation: animate-stripes 3s linear infinite;
      }

      @keyframes animate-stripes {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: 60px 0;
        }
      }

    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function(){
        create_bar("40","green");
        create_bar("60","green");
        create_bar("80","blue");
        create_bar("5","red");

        setInterval(function(){
          var div = document.getElementsByClassName("progress-bar");
          for(d of div){
            var num = Math.floor(Math.random() * 100);
            d.children[0].style.width=num+"%";
            d.children[0].innerHTML=num+"%";
          }
        },2000);
      });

      function create_bar(percent,color){
        var bar=`<div class="progress-bar stripes `+color+`">
          <span style="width: `+percent+`%">`+percent+`%</span>
        </div>`;

        document.getElementById("charts").innerHTML += bar;
      }


    </script>
  </head>
  <body>
    <div style="text-align:center"><h1>My Charts</h1></div>
    <div id="charts"></div>
  </body>
</html>