Progress Indicator (CSS Component)

Component preview opent in nieuw tabblad

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

  • toevoeging class dso-block zorgt voor horizontaal en verticaal gecentreerde progress-indicator;
  • icm. class dso-small zorgt dit voor een (afhankelijk van de inhoud) minimaal 48px hoge progress indicator;
  • icm. class dso-medium zorgt dit voor een (afhankelijk van de inhoud) minimaal 64px hoge progress indicator;
  • icm. class 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