DSO Toolkit homepage

Progress Indicator

De progress indicator is er in drie groottes (small: 24px, medium: 32px, large: 48px). 

<!-- Default -->
<div class="dso-progress-indicator dso-progress-indicator-looping dso-small" role="progressbar" aria-valuetext="Een moment geduld alstublieft.">
    <div class="dso-progress-indicator-spinner"></div><span class="dso-progress-indicator-label">Een moment geduld alstublieft.</span>
</div>
<!-- Spinner Medium Infinite -->
<div class="dso-progress-indicator dso-progress-indicator-looping dso-medium" role="progressbar" aria-valuetext="Een moment geduld alstublieft.">
    <div class="dso-progress-indicator-spinner"></div><span class="dso-progress-indicator-label">Een moment geduld alstublieft.</span>
</div>
<!-- Spinner Large Infinite -->
<div class="dso-progress-indicator dso-progress-indicator-looping dso-large" role="progressbar" aria-valuetext="Een moment geduld alstublieft.">
    <div class="dso-progress-indicator-spinner"></div><span class="dso-progress-indicator-label">Een moment geduld alstublieft.</span>
</div>
<div {{ className('dso-progress-indicator', 'dso-progress-indicator-looping', [size, 'dso-' + size]) }} role="progressbar" aria-valuetext="{{ status }}">
  <div class="dso-progress-indicator-spinner"></div><span class="dso-progress-indicator-label">{{- status -}}</span>
</div>
/* Default */
__title: Spinner 24px groot
status: Een moment geduld alstublieft.
size: small
/* Spinner Medium Infinite */
__title: Spinner 32px groot
status: Een moment geduld alstublieft.
size: medium
/* Spinner Large Infinite */
__title: Spinner 48px groot
status: Een moment geduld alstublieft.
size: large