---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/progress-bar'
title: 'Eine Progress Bar hinzufügen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:55:00+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Sie erhalten einen farbigen Balken mit Beschriftung, der auf einen Blick zeigt, wie weit etwas gekommen ist. Nutzen Sie ihn für Projektstatus, Spendenziele, Kursfortschritt oder Skill-Level.'
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: 'Eine Progress Bar hinzufügen'
      description: 'Sie erhalten einen farbigen Balken mit Beschriftung, der auf einen Blick zeigt, wie weit etwas gekommen ist. Nutzen Sie ihn für Projektstatus, Spendenziele, Kursfortschritt oder Skill-Level.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T23:55:00+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/de/hc/dokumentation/dxpr-builder-lernen/elemente/progress-bar'
      articleSection: 'Daten und Animation'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/progress-bar'
      description: 'Sie erhalten einen farbigen Balken mit Beschriftung, der auf einen Blick zeigt, wie weit etwas gekommen ist. Nutzen Sie ihn für Projektstatus, Spendenziele, Kursfortschritt oder Skill-Level.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Startseite
            item: 'https://dxpr.com/de'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: de
---
[Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Inhalte hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements) /[Daten und Animation](/de/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Eine Progress Bar hinzufügen.

 DXPR Builder lernenSeiten erstellenInhalte hinzufügenDaten und Animation

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Das Aussehen eines Elements im Style-Tab ändern](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/style-tab)

Sie erhalten einen farbigen Balken mit Beschriftung, der auf einen Blick zeigt, wie weit etwas gekommen ist. Nutzen Sie ihn für Projektstatus, Spendenziele, Kursfortschritt oder Skill-Level.

## Eine Progress Bar hinzufügen

Öffnen Sie Ihre Seite im angemeldeten Zustand: Wenn Sie mit der Maus über den Inhaltsbereich fahren, erscheinen die Steuerelemente des Builders. [Ihre erste Seite](/de/hc/dokumentation/dxpr-builder-lernen/erste-schritte/erste-seite) zeigt die Grundlagen.

1. Fahren Sie mit der Maus über die Spalte und klicken Sie in ihrer Steuerleiste auf **+**; klicken Sie auf einer leeren Seite auf **Add Elements**. Öffnen Sie den **Content**-Tab und klicken Sie auf **Progress bar**. Die Progress Bar landet oben in der Spalte und ihr Einstellungsdialog öffnet sich.
2. Geben Sie ein **Label** für den Balken ein, zum Beispiel „Website redesign“.
3. Ziehen Sie **Progress**, um festzulegen, wie weit sich der Balken füllt, oder geben Sie den Wert in das Feld neben dem Regler ein. Hier wählen wir 73 Prozent.
4. Wählen Sie eine **Front color** für den gefüllten Teil aus der Palette.
5. Weiter unten im selben Dialog wählen Sie, ob der Balken **Stripes** erhält. Hier kreuzen wir **Add striped pattern to bar** an.
6. Klicken Sie im Dialog auf **Speichern**. Klicken Sie dann in der Symbolleiste oben im Inhaltsbereich auf **Speichern**, um die Seite zu speichern.

  ## Was Sie sehen

Ein Balken mit Ihrer Beschriftung füllt sich bis zum eingestellten Wert, in der von Ihnen gewählten Farbe. Die Beschriftung sitzt im gefüllten Teil. Im Video trägt der gestreifte Balken die Aufschrift Website redesign und füllt 73 % seiner Spur. Besucher sehen ihn, sobald Sie die Seite speichern und sie veröffentlicht ist.

## Ihre Progress Bar einrichten

Fahren Sie mit der Maus über das Element und öffnen Sie in seiner Steuerleiste **More > Settings**. Optionen:

- **Label:** der Text auf dem Balken. Sie können auch auf die Beschriftung auf der Seite klicken und sie dort bearbeiten.
- **Progress:** wie weit sich der Balken füllt, von 0 bis 100 Prozent. Die Vorgabe ist 50.
- **Bar height:** die Höhe des Balkens in Pixeln. Die Vorgabe ist 45.
- **Back color:** die Farbe der leeren Spur.
- **Front color:** die Farbe des gefüllten Teils.
- **Grow animation:** standardmäßig ausgeschaltet. Wenn eingeschaltet, startet der Balken leer und füllt sich, sobald er zur Hälfte im Sichtfeld ist.
- **Stripes:** **Add striped pattern to bar** fügt diagonale Streifen hinzu. **Animate stripes (requires striped pattern)** bewegt sie.

## Wenn Sie es nicht sehen

- **Die Progress Bar ist nicht im Content-Tab.** Ihr Benutzerprofil blendet sie aus. Bitten Sie die Administration, sie unter [User Profiles](/de/hc/dokumentation/dxpr-builder-lernen/verwaltung/benutzerprofile-verwaltung) zu aktivieren.
- **Es ist nach dem Neuladen verschwunden.** Die Seite wurde nicht gespeichert. Fügen Sie es erneut hinzu und klicken Sie in der Symbolleiste oben im Inhaltsbereich auf **Speichern**.
- **Der Balken sieht leer aus.** **Progress** steht auf 0 oder **Grow animation** ist eingeschaltet und der Balken ist noch nicht zur Hälfte im Sichtfeld. Scrollen Sie zum Balken oder fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, um **Progress** zu erhöhen.
- **Es gibt keine Streifen oder sie bewegen sich nicht.** **Add striped pattern to bar** ist nicht angekreuzt und **Animate stripes (requires striped pattern)** braucht es. Kreuzen Sie **Add striped pattern to bar** unter **Stripes** an.
- **Der gefüllte Teil verschmilzt mit der Spur.** **Front color** und **Back color** sind sich zu ähnlich. Wählen Sie eine dunklere **Front color** oder eine hellere **Back color**.

## Wie geht es weiter?

[Style-Tab](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/style-tab), um Abstände und Hintergrund Ihrer Progress Bar zu ändern.