Examples
Progress bar
<div class="ys-progress" role="progressbar" aria-valuenow="2"
aria-valuemin="0" aria-valuetext="Progress" aria-valuemax="5">
<div class="ys-progress__bar" aria-hidden="true">
<div class="ys-progress__progress" style="width:40%">
<span class="ys-u-visuallyhidden">Fremdrift: 40%</span>
</div>
</div>
</div>on dark background
<div class="ys-progress ys-progress--light" role="progressbar" aria-valuenow="2"
aria-valuemin="0" aria-valuetext="Progress" aria-valuemax="5">
<div class="ys-progress__bar" aria-hidden="true">
<div class="ys-progress__progress" style="width:40%">
<span class="ys-u-visuallyhidden">Fremdrift: 40%</span>
</div>
</div>
</div>HTML Guidelines
UX and Design Guidelines
