<ol>
  <li>
    <dl>
      <dt>chrome</dt>
      <dd><p data-chart="63"></p></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>safari</dt>
      <dd><p data-chart="17"></p></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>edge</dt>
      <dd><p data-chart="6"></p></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>ie</dt>
      <dd><p data-chart="5"></p></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>others</dt>
      <dd><p data-chart="9"></p></dd>
    </dl>
  </li>
</ol>

*{margin:0;padding:0;box-sizing:border-box;}
body{color:#333;font-size:13px;font-weight:700;background:#333;}
ol{
  list-style:none;
  padding:1em 10%;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  li{
    margin:0 0 1em;
    dl{
      display:flex;
      dt{
        margin-right:1%;
        padding:1em .5em;
        font-size:20px;
        text-align:right;
        width:16.666666% !important;
      }
      dd{
        width:0;
        display:flex;
        align-items:center;
        p{
          padding:1em 0;
          text-align:center;
          background:#000;
          &::after{
            content:attr(data-chart) "％";
          }
        }
      }
    }
  }
}
@for $i from 0 to 5{
  li:nth-child(#{$i + 1}){
    background:linear-gradient(90deg,
    #000 2%, rgba(255 - ($i * 30),255 - ($i * 30),255 - ($i * 30),1) 3%);
    background-size:8.25%;
    background-position:1% 0;
    dt{
      background:rgba(255 - ($i * 30),255 - ($i * 30),255 - ($i * 30),1);
    }
    dd{
      animation:chartBar 1s #{($i * .75) + 1}s 1 forwards;
      p{
        color:rgba(255 - ($i * 30),255 - ($i * 30),255 - ($i * 30),1);
      }
    }
  }
}
@keyframes chartBar{
  0%{width:0;}
  100%{width:82.3333%;}
}

$("p").each(function(){
  chart = $(this).data("chart");
  $(this).css('width', chart + '%');
});