De progress indicator is er in drie groottes (dso-small
: 24px, dso-medium
: 32px, dso-large
: 48px);
dso-block
zorgt voor horizontaal en verticaal gecentreerde progress-indicator;dso-small
zorgt dit voor een (afhankelijk van de inhoud) minimaal 48px hoge progress indicator;dso-medium
zorgt dit voor een (afhankelijk van de inhoud) minimaal 64px hoge progress indicator;dso-large
zorgt dit voor een (afhankelijk van de inhoud) minimaal 96px hoge progress indicator;
<!-- Default -->
<div class="dso-progress-indicator dso-small" role="progressbar" aria-labelledby="progress-indicator-label">
<div class="dso-progress-indicator-spinner"></div><span id="progress-indicator-label" class="dso-progress-indicator-label">Resultaten laden: een moment geduld alstublieft.</span>
</div>
<!-- Spinner Medium Infinite -->
<div class="dso-progress-indicator dso-medium" role="progressbar" aria-labelledby="progress-indicator-label-md">
<div class="dso-progress-indicator-spinner"></div><span id="progress-indicator-label-md" class="dso-progress-indicator-label">Resultaten laden: een moment geduld alstublieft.</span>
</div>
<!-- Spinner Large Infinite -->
<div class="dso-progress-indicator dso-large" role="progressbar" aria-labelledby="progress-indicator-label-sm">
<div class="dso-progress-indicator-spinner"></div><span id="progress-indicator-label-sm" class="dso-progress-indicator-label">Resultaten laden: een moment geduld alstublieft.</span>
</div>
<!-- Spinner Small Block -->
<div class="dso-progress-indicator dso-small dso-block" role="progressbar" aria-labelledby="progress-indicator-label-sm-block">
<div class="dso-progress-indicator-spinner"></div><span id="progress-indicator-label-sm-block" class="dso-progress-indicator-label">Resultaten laden: een moment geduld alstublieft.</span>
</div>
<!-- Spinner Large Block -->
<div class="dso-progress-indicator dso-large dso-block" role="progressbar" aria-labelledby="progress-indicator-label-lg-block">
<div class="dso-progress-indicator-spinner"></div><span id="progress-indicator-label-lg-block" class="dso-progress-indicator-label">Resultaten laden: een moment geduld alstublieft.</span>
</div>
<div {{ className('dso-progress-indicator', [size, 'dso-' + size], [block, 'dso-block']) }} role="progressbar" aria-labelledby="{{ labelid }}">
<div class="dso-progress-indicator-spinner"></div><span id="{{ labelid }}" class="dso-progress-indicator-label">{{- label -}}</span>
</div>
/* Default */
__title: Spinner small (24px)
labelid: progress-indicator-label
label: 'Resultaten laden: een moment geduld alstublieft.'
size: small
/* Spinner Medium Infinite */
__title: Spinner medium (32px)
labelid: progress-indicator-label-md
label: 'Resultaten laden: een moment geduld alstublieft.'
size: medium
/* Spinner Large Infinite */
__title: Spinner large (48px)
labelid: progress-indicator-label-sm
label: 'Resultaten laden: een moment geduld alstublieft.'
size: large
/* Spinner Small Block */
__title: Spinner small - gecentreerd blok
labelid: progress-indicator-label-sm-block
label: 'Resultaten laden: een moment geduld alstublieft.'
size: small
block: true
/* Spinner Large Block */
__title: Spinner large - gecentreerd blok
labelid: progress-indicator-label-lg-block
label: 'Resultaten laden: een moment geduld alstublieft.'
size: large
block: true