---
url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/elements/circle-counter'
title: 'Einen Circle Counter hinzufügen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:54:24+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Sie erhalten einen animierten Ring, der sich bis zu einer Kennzahl füllt, zum Beispiel einer Quote oder einem Score. Nutzen Sie ihn, um eine Statistik auf einer Landingpage oder einer Über-uns-Seite hervorzuheben.'
tags:
  - 'Data en beweging'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Einen Circle Counter hinzufügen'
      description: 'Sie erhalten einen animierten Ring, der sich bis zu einer Kennzahl füllt, zum Beispiel einer Quote oder einem Score. Nutzen Sie ihn, um eine Statistik auf einer Landingpage oder einer Über-uns-Seite hervorzuheben.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T23:54:24+0000'
      dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/elements/circle-counter'
      articleSection: 'Data en beweging'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/elements/circle-counter'
      description: 'Sie erhalten einen animierten Ring, der sich bis zu einer Kennzahl füllt, zum Beispiel einer Quote oder einem Score. Nutzen Sie ihn, um eine Statistik auf einer Landingpage oder einer Über-uns-Seite hervorzuheben.'
      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
---
[Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[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 en beweging](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Einen Circle Counter hinzufügen.

 Learn DXPR BuilderBuild pagesAdd contentData en beweging

   ## In this guide

 Related guides

- [Das Aussehen eines Elements im Style-Tab ändern](/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

Sie erhalten einen animierten Ring, der sich bis zu einer Kennzahl füllt, zum Beispiel einer Quote oder einem Score. Nutzen Sie ihn, um eine Statistik auf einer Landingpage oder einer Über-uns-Seite hervorzuheben.

## Einen Circle Counter 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/documentation/learn-dxpr-builder/getting-started/first-page) 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 **Circle counter**. Der Circle Counter landet oben in der Spalte und sein Einstellungsdialog öffnet sich.
2. Ziehen Sie den Regler **Percent**, um festzulegen, wie weit sich der Ring füllt, oder geben Sie den Wert in das Feld daneben ein. Hier stellen wir 78 ein.
3. Wählen Sie die Bogenfarbe unter **Foreground color**.
4. Öffnen Sie den Bereich Circle content und geben Sie eine **Text**-Beschriftung für die Kennzahl ein.
5. Geben Sie im Feld **Icon** darunter chart in das Suchfeld **Search** ein und klicken Sie im Raster auf ein Icon.
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 Ring füllt sich bis zu dem von Ihnen eingestellten Prozentwert, mit Ihrem Icon und Ihrer Beschriftung in der Mitte. Im Video ist er lila, füllt sich zu 78 Prozent und trägt die Aufschrift Renewal rate. Der Ring animiert sich, sobald er ins Sichtfeld scrollt. Besucher sehen ihn, sobald Sie die Seite speichern und sie veröffentlicht ist.

## Ihren Circle Counter einrichten

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

- **Percent:** wie weit sich der Ring füllt, von 0 bis 100.
- **Dimension:** die Größe des Kreises in Pixeln, von 100 bis 500.
- **Foreground color:** die Farbe des gefüllten Bogens.
- **Background color:** die Farbe der leeren Spur.
- **Fill color:** die Farbe im Inneren des Kreises.
- **Foreground width:** die Stärke des Bogens.
- **Animation:** füllt den Bogen ab null. **Animation duration** und **Animation delay** legen das Timing in Millisekunden fest.
- **Animation in-viewport:** wartet mit der Animation, bis der Kreis ins Sichtfeld scrollt.

Jeder Regler hat ein Zahlenfeld daneben für exakte Werte. Der Bereich **Circle content** legt fest, was in der Mitte steht:

- **Show progress:** zeigt die Prozentzahl statt Ihres eigenen Texts und Icons. Standardmäßig ausgeschaltet.
- **Text:** eine kurze Beschriftung. **Font size** und **Text color** gestalten sie.
- **Info:** eine kleinere zweite Zeile unter dem Text.
- **Icon:** ein Icon vor dem Text. Das Dropdown neben **Search** begrenzt das Raster auf ein Icon-Set. **Icon size** und **Icon color** gestalten es.

## Wenn Sie es nicht sehen

- **Der Circle Counter ist nicht im Content-Tab.** Ihr Benutzerprofil blendet ihn aus. Bitten Sie die Administration, ihn unter [User Profiles](/de/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) 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 Ring ist blass oder fehlt.** **Foreground color** und **Background color** liegen zu nah an der Seitenfarbe. Fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, und wählen Sie dann Farben mit mehr Kontrast.
- **Der Ring animiert sich nicht.** **Animation** ist ausgeschaltet oder der Ring wartet, bis er ins Sichtfeld scrollt. Schalten Sie **Animation** ein und scrollen Sie den Kreis ins Sichtfeld.
- **Ihr Text und Icon erscheinen nicht.** **Show progress** ist eingeschaltet, daher zeigt der Ring stattdessen die Prozentzahl. Schalten Sie **Show progress** unter **Circle content** aus.

## Wie geht es weiter?

[Style-Tab](/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab), um Abstände und Hintergrund Ihres Circle Counters zu ändern.