Feature/progress

[tvanbeek]

EPFL visual style html5 <progress> bar.

Screen.Recording.2022-05-10.at.16.02.44.mov

[tvanbeek]

FYI, I propose to use the <progress> element in favor of the Bootstrap implementation where they use a div element with class .progress.

Pros

1. Using <progress> is semantically correct
2. We can use the :indeterminate pseudo class to animate a continuous loading state

Cons

1. The reason Bootstrap uses div.progress is so they can more easily put a value inside the progress like so:

<div class="progress">
  <div class="progress-bar" style="width: 25%;">25%</div>
</div>

[alinekeller]

The <progress> element is also better for accessibility, so yay !
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role#best_practices

You mention in the cons that a value can be added in the progress <div>, but it can also be done with the <progress> element https://www.w3schools.com/tags/tag_progress.asp – and it would be useful for accessibility.

[tvanbeek]

You mention in the cons that a value can be added in the progress <div>, but it can also be done with the <progress> element https://www.w3schools.com/tags/tag_progress.asp – and it would be useful for accessibility.

Yes good point!