how to create a progress bar using css and based on current width

I have just started my journey with javascript and I am trying to find a solution for a problem.

I created a div that is a progress bar that will gradually fill the full width of the div as we press the button. Default width of the button should start as 0% and go up to 100%. I am trying to come up with jquery or a vanilla javascript but I am unable to do this. Any help would be great as I am really interested in improving my jquery/js skills.

`<div id="myProgress">
<div id="progressbar"></div>
<button id="button-progress"></button>
</div>
`



  #myProgress {


     width: 100%;
      background-color: #ddd;

}

#progressbar {

      width: 0%;
      height: 30px;
      background-color: #1D1387;
      text-align: center;
      line-height: 30px;
      color: white;

}