Update SVG progress circle by clicking checkboxes

I have 5 checkboxes representing a To-Do list, for every checkbox I click, the circle's diameter should complete 1/5, 2/5 , 3/5, 4/5, 5/5 until it completes the 5 checkboxes, the order of how the checkboxes are created shouldn't matter. If I clicked "first ToDo" and "third ToDo" without selecting "second ToDo" the circle should still show 2/5 of itself.

So far I've been able to make the circle interact with the input of the checkboxes, but I'm struggling to make the visual progress happen, when I click one of the ToDos the progress circle it's marked but not in the right order and portions, also the idea is that the visual progress should move forward to the right until completing the circle.

Looking for information online, I see people uses <circle path>but it is really confusing for me because some configurations are made through CSS while other people do it in the JS, according to me it is best that I use JS to show the progress, because it should behave in base of the checkboxes.

function update() {

  var myBar = document.getElementById("myCircle");
  //Reference the Form.
  var toDo = document.getElementById("toDo");

  //Reference all the CheckBoxes in Table.
  boxes = toDo.querySelectorAll("input[type='checkbox']:checked");
  checked = boxes.length


  myBar.style.strokeDasharray = ((checked) * 100) + "%";
  if (checked === 0) {
    alert("Please select CheckBox(s).");
  }
  return true;
}

checks = document.querySelectorAll("input[type='checkbox']");
checks.forEach(function(box) {
  box.addEventListener("change", function() {
    update()
  });
});

#myCircle {
  width: 0;
  height: 30px;
  stroke: #A3BBAD;
  stroke-width: 3px;
}

#myProgress {
  margin: auto;
  width: 50%;
  stroke: #357266;
  stroke-width: 3px;
}

<svg height="100" width="100">
  <circle id="myProgress" cx="50" cy="50" r="40" fill="transparent"/>
  <circle id="myCircle" cx="50" cy="50" r="40" fill="transparent"/>
</svg>
<br>

<form id="toDo">
  <input id="FirstToDo" type="checkbox" value="1" /><label for="FirstToDo">First</label>
  <input id="SecondToDo" type="checkbox" value="2" /><label for="SecondToDo">Second</label>
  <input id="ThirdToDo" type="checkbox" value="3" /><label for="ThirdToDo">Third</label>
  <input id="FourthToDo" type="checkbox" value="4" /><label for="FourthToDo">Fourth</label>
  <input id="FifthToDo" type="checkbox" value="5" /><label for="FifthToDo">Fifth</label>
</form>
<script src="Circle.js"></script>