DSO Toolkit homepage

Progress Indicator (Web Component)

Component preview opent in nieuw tabblad

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

  • toevoeging attribute block zorgt voor horizontaal en verticaal gecentreerde progress-indicator;
  • icm. size small zorgt dit voor een (afhankelijk van de inhoud) minimaal 48px hoge progress indicator;
  • icm. size medium zorgt dit voor een (afhankelijk van de inhoud) minimaal 64px hoge progress indicator;
  • icm. size large zorgt dit voor een (afhankelijk van de inhoud) minimaal 96px hoge progress indicator;

Spinner small (24px)

Spinner medium (32px)

Spinner large (48px)

Spinner small - gecentreerd blok

Spinner large - gecentreerd blok

<!-- Default -->
<dso-progress-indicator size="small" label="Resultaten laden: een moment geduld alstublieft."></dso-progress-indicator>
<!-- Spinner Medium Infinite -->
<dso-progress-indicator size="medium" label="Resultaten laden: een moment geduld alstublieft."></dso-progress-indicator>
<!-- Spinner Large Infinite -->
<dso-progress-indicator size="large" label="Resultaten laden: een moment geduld alstublieft."></dso-progress-indicator>
<!-- Spinner Small Block -->
<dso-progress-indicator block size="small" label="Resultaten laden: een moment geduld alstublieft."></dso-progress-indicator>
<!-- Spinner Large Block -->
<dso-progress-indicator block size="large" label="Resultaten laden: een moment geduld alstublieft."></dso-progress-indicator>
<dso-progress-indicator {{ attributes([block, 'block'], [size, 'size', size], [label, 'label', label]) }}></dso-progress-indicator>
/* Default */
__title: Spinner small (24px)
label: 'Resultaten laden: een moment geduld alstublieft.'
size: small
/* Spinner Medium Infinite */
__title: Spinner medium (32px)
label: 'Resultaten laden: een moment geduld alstublieft.'
size: medium
/* Spinner Large Infinite */
__title: Spinner large (48px)
label: 'Resultaten laden: een moment geduld alstublieft.'
size: large
/* Spinner Small Block */
__title: Spinner small - gecentreerd blok
label: 'Resultaten laden: een moment geduld alstublieft.'
size: small
block: true
/* Spinner Large Block */
__title: Spinner large - gecentreerd blok
label: 'Resultaten laden: een moment geduld alstublieft.'
size: large
block: true