How can I create a customized progress bar

Hello,

Has anyone created either a circular progress bar with the % of completion inside of the circle or a progress bar that is thicker (height) with the % of completion inside of the bar.

I tried the below code but the green bar is not moving when I go to the next screen



<script type="text/javascript">
function GetProgressValue()
{
  var divNodes = document.getElementsByTagName("div")

  for (i=0;i<divNodes.length;i++)
  {
    var attributeList = divNodes[i].attributes
    var className = attributeList.getNamedItem("class")

    if ((className != null) && (className.value == "progress_bar_inner"))
    {
     
      var ProgressBarValueNode = document.getElementById("ProgressBarValue");
      if (ProgressBarValueNode != null)
      {
        ProgressBarValueNode.innerHTML = divNodes[i].style.width;
      }
      break;
    }
  }

}



function onPageload ()
  {
    GetProgressValue();
  //  Autofill();
 }

 window.onload = onPageload; 
</script>

<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<body>



<div id="myProgress">
  <div id="myBar">
   <div>
<table style margin-left:auto; margin-right:auto; width:100px;" border="0" cellpadding="" cellspacing="">

<tr>
   <td><font size="2" color="#ffffff" ><div id="ProgressBarValue"> </div></font> </td>

</tr>
<tr >
<td> [%ProgressBar( )%]</td>
</tr>

</table>
</div>
  
  
  </div>
</div>


 
<style type="text/css">
.progress_bar {
    display: none;
}
</style>

Any help would be greatly appreciated. Thanks in advance.