--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/cirkelteller' title: 'Een cirkelteller toevoegen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:27:39+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Je krijgt een geanimeerde ring die zich vult om één kerngetal te tonen, zoals een percentage of een score. Gebruik hem om een statistiek te laten opvallen op een landingspagina of een over-pagina.' 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 cirkelteller toevoegen' description: 'Je krijgt een geanimeerde ring die zich vult om één kerngetal te tonen, zoals een percentage of een score. Gebruik hem om een statistiek te laten opvallen op een landingspagina of een over-pagina.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:27:39+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/cirkelteller' articleSection: 'Data en beweging' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/cirkelteller' description: 'Je krijgt een geanimeerde ring die zich vult om één kerngetal te tonen, zoals een percentage of een score. Gebruik hem om een statistiek te laten opvallen op een landingspagina of een over-pagina.' 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 cirkelteller 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 geanimeerde ring die zich vult om één kerngetal te tonen, zoals een percentage of een score. Gebruik hem om een statistiek te laten opvallen op een landingspagina of een over-pagina. ## Een cirkelteller 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 **Cirkelteller**. De cirkelteller komt bovenaan de kolom te staan en het dialoogvenster opent. 2. Sleep de schuifregelaar **Percentage** om in te stellen hoever de ring zich vult, of typ de waarde in het vak ernaast. Hier stellen we 78 in. 3. Kies de boogkleur in **Voorgrondkleur**. 4. Open de sectie Cirkelinhoud en typ een **Tekst**-label voor de metric. 5. Typ in het veld **Pictogram** hieronder chart in het vak **Zoeken** en klik op een pictogram in het raster. 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 ring vult zich tot het percentage dat je hebt ingesteld, met je pictogram en label in het midden. In de video is hij paars, vult hij zich tot 78 procent en staat er Vernieuwingspercentage. De ring animeert zodra hij in beeld scrolt. Bezoekers zien hem zodra je de pagina opslaat en publiceert. ## Je cirkelteller instellen Beweeg over het element en open **More > Settings** in de besturingsbalk. Opties: - **Percentage:** hoever de ring zich vult, van 0 tot 100. - **Afmeting:** de grootte van de cirkel in pixels, van 100 tot 500. - **Voorgrondkleur:** de kleur van de gevulde boog. - **Achtergrondkleur:** de kleur van het lege spoor. - **Vulkleur:** de kleur in de cirkel. - **Boogdikte:** de dikte van de boog. - **Animatie:** vult de boog vanaf nul. **Animatieduur** en **Animatievertraging** bepalen de timing in milliseconden. - **Animatie in beeld:** wacht met animeren tot de cirkel in beeld scrolt. Elke schuifregelaar heeft een getalvak ernaast voor exacte waarden. De sectie **Cirkelinhoud** bepaalt wat er in het midden staat: - **Voortgang tonen:** toont het percentage in plaats van je eigen tekst en pictogram. Staat standaard uit. - **Tekst:** een kort label. **Lettergrootte** en **Tekstkleur** stijlen het. - **Info:** een kleinere tweede regel onder de tekst. - **Pictogram:** een pictogram voor de tekst. De vervolgkeuzelijst naast **Zoeken** beperkt het raster tot één pictogramset. **Pictogramgrootte** en **Pictogramkleur** stijlen het. ## Als je het niet ziet - **Cirkelteller 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 ring is vaag of ontbreekt.** **Voorgrondkleur** en **Achtergrondkleur** liggen te dicht bij de paginakleur. Beweeg over het element en open **More > Settings** en kies kleuren met meer contrast. - **De ring animeert niet.** **Animatie** staat uit, of de ring wacht tot hij in beeld scrolt. Zet **Animatie** aan en scrol de cirkel in beeld. - **Je tekst en pictogram verschijnen niet.** **Voortgang tonen** staat aan, dus de ring toont het percentage. Zet **Voortgang tonen** uit onder **Cirkelinhoud**. ## Wat nu? [Tabblad Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab) om de witruimte en achtergrond van je cirkelteller aan te passen.