Feature/progress

[tvanbeek]

EPFL visual style html5 <progress> bar.

https://user-images.githubusercontent.com/3518980/167648548-4193b6a1-66e3-4cb6-b383-6bd43c14b958.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>

[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!