DSO Toolkit homepage

Progress Indicator

De progress indicator is er in drie groottes (small: 24px, medium: 32px, large: 48px) en twee varianten: onbepaalde tijd en bepaalde tijd. Bij de variant met bepaalde tijd is voorzien in een aantal voorgedefinieerde waarden (1, 2, 5, 10, 30, 60 seconden). Deze kunnen worden overruled door het opnieuw genereren van de css bestanden vanuit scss, met deze variabele: $dso-progress-indicator-timed-durations: 1, 2, 5, 10, 30, 60; 

<!-- 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"><span class="dso-progress-indicator-spinner-mask"></span></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"><span class="dso-progress-indicator-spinner-mask"></span></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"><span class="dso-progress-indicator-spinner-mask"></span></div>
    <span class="dso-progress-indicator-label">Een moment geduld alstublieft.</span>
</div>
<!-- Spinner Small 2 S -->
<div class="dso-progress-indicator dso-progress-indicator-timed dso-progress-indicator-duration-2s dso-small" role="progressbar" aria-valuetext="Een moment geduld alstublieft.">
    <div class="dso-progress-indicator-spinner"><span class="dso-progress-indicator-spinner-mask"></span></div>
    <span class="dso-progress-indicator-label">Een moment geduld alstublieft.</span>
</div>
<!-- Spinner Medium 5 S -->
<div class="dso-progress-indicator dso-progress-indicator-timed dso-progress-indicator-duration-5s dso-medium" role="progressbar" aria-valuetext="Een moment geduld alstublieft.">
    <div class="dso-progress-indicator-spinner"><span class="dso-progress-indicator-spinner-mask"></span></div>
    <span class="dso-progress-indicator-label">Een moment geduld alstublieft.</span>
</div>
<!-- Spinner Large 10 S -->
<div class="dso-progress-indicator dso-progress-indicator-timed dso-progress-indicator-duration-10s dso-large" role="progressbar" aria-valuetext="Een moment geduld alstublieft.">
    <div class="dso-progress-indicator-spinner"><span class="dso-progress-indicator-spinner-mask"></span></div>
    <span class="dso-progress-indicator-label">Een moment geduld alstublieft.</span>
</div>
<div class="dso-progress-indicator dso-progress-indicator-{% if time %}timed dso-progress-indicator-duration-{{time}}{% else %}looping{% endif %} dso-{{- size -}}" role="progressbar" aria-valuetext="{{ status }}">
  <div class="dso-progress-indicator-spinner"><span class="dso-progress-indicator-spinner-mask"></span></div>
  <span class="dso-progress-indicator-label">{{- status -}}</span>
</div>
/* Default */
__title: 'Spinner 24px groot, onbepaalde tijd'
status: Een moment geduld alstublieft.
size: small
/* Spinner Medium Infinite */
__title: 'Spinner 32px groot, onbepaalde tijd'
status: Een moment geduld alstublieft.
size: medium
/* Spinner Large Infinite */
__title: 'Spinner 48px groot, onbepaalde tijd'
status: Een moment geduld alstublieft.
size: large
/* Spinner Small 2 S */
__title: 'Spinner 24px groot, 2 seconden'
status: Een moment geduld alstublieft.
size: small
time: 2s
/* Spinner Medium 5 S */
__title: 'Spinner 32px groot, 5 seconden'
status: Een moment geduld alstublieft.
size: medium
time: 5s
/* Spinner Large 10 S */
__title: 'Spinner 48px groot, 10 seconden'
status: Een moment geduld alstublieft.
size: large
time: 10s