---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/voortgangsbalk'
title: 'Een voortgangsbalk toevoegen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:33:52+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Je krijgt een gekleurde balk met een label die in één oogopslag toont hoever iets is. Gebruik hem voor projectstatus, fondsenwervingsdoelen, cursusvoortgang of vaardigheidsniveaus.'
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Een voortgangsbalk toevoegen'
      description: 'Je krijgt een gekleurde balk met een label die in één oogopslag toont hoever iets is. Gebruik hem voor projectstatus, fondsenwervingsdoelen, cursusvoortgang of vaardigheidsniveaus.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:33:52+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/voortgangsbalk'
      articleSection: 'Data en beweging'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/voortgangsbalk'
      description: 'Je krijgt een gekleurde balk met een label die in één oogopslag toont hoever iets is. Gebruik hem voor projectstatus, fondsenwervingsdoelen, cursusvoortgang of vaardigheidsniveaus.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Content toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements) /[Data en beweging](/nl/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Een voortgangsbalk toevoegen.

 DXPR Builder lerenPagina’s bouwenContent toevoegenData en beweging

   ## In deze gids

 Gerelateerde gidsen

- [Het uiterlijk van een element wijzigen in het paneel Stijl](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/stijl-tabblad)

Je krijgt een gekleurde balk met een label die in één oogopslag toont hoever iets is. Gebruik hem voor projectstatus, fondsenwervingsdoelen, cursusvoortgang of vaardigheidsniveaus.

## Een voortgangsbalk toevoegen

Open je pagina terwijl je bent ingelogd: de builder-knoppen verschijnen als je met de muis over het inhoudsgebied beweegt. [Je eerste pagina](/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/eerste-pagina) legt de basis uit.

1. Beweeg over de kolom en klik op **+** in de besturingsbalk, of klik op **Add Elements** op een lege pagina. Open het tabblad **Inhoud** en klik op **Voortgangsbalk**. De voortgangsbalk komt bovenaan de kolom te staan en het dialoogvenster opent.
2. Typ een **Label** voor de balk, zoals “Website-herontwerp”.
3. Sleep **Voortgang** om in te stellen hoever de balk zich vult, of typ de waarde in het vak naast de schuifregelaar. Hier kiezen we 73 procent.
4. Kies een **Voorkleur** voor het gevulde deel uit het palet.
5. Kies lager in hetzelfde dialoogvenster of de balk **Strepen** krijgt. Hier vinken we **Streeppatroon toevoegen** aan.
6. Klik in het dialoogvenster op **Opslaan**. Klik daarna op **Opslaan** in de werkbalk bovenaan het inhoudsgebied om de pagina op te slaan.

  ## Wat je ziet

Een balk met je label vult zich tot de waarde die je hebt ingesteld, in de kleur die je hebt gekozen. Het label staat in het gevulde deel. In de video staat op de gestreepte balk Website-herontwerp en vult hij 73% van zijn spoor. Bezoekers zien hem zodra je de pagina opslaat en publiceert.

## Je voortgangsbalk instellen

Beweeg over het element en open **More > Settings** in de besturingsbalk. Opties:

- **Label:** de tekst op de balk. Je kunt ook op het label op de pagina klikken en het daar bewerken.
- **Voortgang:** hoever de balk zich vult, van 0 tot 100 procent. De standaard is 50.
- **Balkhoogte:** de hoogte van de balk in pixels. De standaard is 45.
- **Achterkleur:** de kleur van het lege spoor.
- **Voorkleur:** de kleur van het gevulde deel.
- **Groeianimatie:** staat standaard uit. Als hij aanstaat begint de balk leeg en vult hij zich zodra de helft ervan in beeld is.
- **Strepen:** **Streeppatroon toevoegen** voegt diagonale strepen toe. **Strepen animeren (vereist streeppatroon)** laat ze bewegen.

## Als je het niet ziet

- **Voortgangsbalk staat niet in het tabblad Inhoud.** Je gebruikersprofiel verbergt hem. Vraag een beheerder om hem in te schakelen in [Gebruikersprofielen](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **Hij is weg na het herladen.** De pagina is niet opgeslagen. Voeg hem opnieuw toe en klik op **Opslaan** in de werkbalk bovenaan het inhoudsgebied.
- **De balk lijkt leeg.** **Voortgang** staat op 0, of **Groeianimatie** staat aan en de balk is nog niet half in beeld. Scrol naar de balk, of beweeg over het element en open **More > Settings** om **Voortgang** te verhogen.
- **Er zijn geen strepen, of ze bewegen niet.** **Streeppatroon toevoegen** is niet aangevinkt, en **Strepen animeren (vereist streeppatroon)** heeft het nodig. Vink **Streeppatroon toevoegen** aan onder **Strepen**.
- **Het gevulde deel valt weg tegen het spoor.** **Voorkleur** en **Achterkleur** lijken te veel op elkaar. Kies een donkerdere **Voorkleur** of een lichtere **Achterkleur**.

## Wat nu?

[Tabblad Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab) om de witruimte en achtergrond van je voortgangsbalk aan te passen.