DSO Toolkit homepage

Progress Indicator

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;
  • icm. class dso-gray zorgt dit voor een lichtgrijze achtergrond.
<!-- 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>
<!-- Spinner Small Block -->
<div class="dso-progress-indicator dso-progress-indicator-looping dso-small dso-block" 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 Block Background -->
<div class="dso-progress-indicator dso-progress-indicator-looping dso-medium dso-block dso-gray" 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 Block -->
<div class="dso-progress-indicator dso-progress-indicator-looping dso-large dso-block" 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], [block, 'dso-block'], [(block and color), 'dso-' + color]) }} role="progressbar" aria-valuetext="{{ status }}">
  <div class="dso-progress-indicator-spinner"></div><span class="dso-progress-indicator-label">{{- status -}}</span>
</div>
/* Default */
__title: Spinner small (24px)
status: Een moment geduld alstublieft.
size: small
/* Spinner Medium Infinite */
__title: Spinner medium (32px)
status: Een moment geduld alstublieft.
size: medium
/* Spinner Large Infinite */
__title: Spinner large (48px)
status: Een moment geduld alstublieft.
size: large
/* Spinner Small Block */
__title: Spinner small - gecentreerd blok
status: Een moment geduld alstublieft.
size: small
block: true
/* Spinner Medium Block Background */
__title: Spinner medium - gecentreerd blok met achtergrond
status: Een moment geduld alstublieft.
size: medium
block: true
color: gray
/* Spinner Large Block */
__title: Spinner large - gecentreerd blok
status: Een moment geduld alstublieft.
size: large
block: true