---
url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/elements/progress-bar'
title: 'Voortgangsbalk | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:33:52+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Houd uw kijkers op de hoogte van de voortgang van een productlancering of mijlpaal of laat op creatieve wijze uw niveau van verschillende vaardigheden visueel zien met de voortgangsbalk van DXPR Builder. Volg de onderstaande stappen om het voortgangsbalkelement op uw website te gaan gebruiken:'
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-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: Voortgangsbalk
      description: 'Houd uw kijkers op de hoogte van de voortgang van een productlancering of mijlpaal of laat op creatieve wijze uw niveau van verschillende vaardigheden visueel zien met de voortgangsbalk van DXPR Builder. Volg de onderstaande stappen om het voortgangsbalkelement op uw website te gaan gebruiken:'
      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-23T14:31:17+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/documentation/learn-dxpr-builder/elements/progress-bar'
      articleSection: 'Data and motion'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/elements/progress-bar'
      description: 'Houd uw kijkers op de hoogte van de voortgang van een productlancering of mijlpaal of laat op creatieve wijze uw niveau van verschillende vaardigheden visueel zien met de voortgangsbalk van DXPR Builder. Volg de onderstaande stappen om het voortgangsbalkelement op uw website te gaan gebruiken:'
      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
---
[Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Data and motion](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Voortgangsbalk.

 Learn DXPR BuilderBuild pagesAdd contentData and motion

   ## In this guide

 Related guides

- [Tabblad Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

 Houd uw kijkers op de hoogte van de voortgang van een productlancering of mijlpaal of laat op creatieve wijze uw niveau van verschillende vaardigheden visueel zien met de voortgangsbalk van DXPR Builder.

 Volg de onderstaande stappen om het voortgangsbalkelement op uw website te gaan gebruiken:

1. Klik op het **+** icoon
2. Ga naar het tabblad **Inhoud**
3. Selecteer het **voortgangsbalkelement**
4. Vul het bericht van de balk in het veld **Label** in
5. Stel de voortgang in het veld **Voortgang** in. Hierdoor wordt de lengte van de voortgangsbalk gewijzigd.
6. Stel de maat voor de staaf in via **Staafhoogte** instelling
7. Selecteer de kleur van de **voor-** en **achterkant** van de balk
8. *Optioneel* kunt u **strepen** en **animaties** aan de balken toevoegen
9. Nadat u uw voorkeursinstellingen heeft geselecteerd, kunt u op **Wijzigingen opslaan** klikken en u bent klaar!