--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/circle-counter' title: 'Adding a Circle Counter | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:27:39+00:00' updated: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Circular progress' 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: 'Adding a Circle Counter' description: 'Circular progress' 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-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/hc/documentation/learn-dxpr-builder/elements/circle-counter' articleSection: 'Data and motion' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/circle-counter' description: 'Circular progress' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/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 and motion](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Adding a Circle Counter. Circular progress Learn DXPR BuilderBuild pagesAdd contentData and motion ## In this guide Related guides - [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) You get an animated ring that fills up to show one key number, such as a rate or a score. Use it to make a statistic stand out on a landing page or an about page. ## Add a circle counter Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics. 1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Circle counter**. It lands at the top of the column and its settings dialog opens. 2. Drag the **Percent** slider to set how far the ring fills, or type the value in the box next to it. Here we set 78. 3. Choose the arc colour in **Foreground color**. 4. Open the Circle content section and type a **Text** label for the metric. 5. In the **Icon** field below, type chart in the **Search** box and click an icon in the grid. 6. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page. ## What you see A ring fills to the percent you set, with your icon and label in the middle. In the video, it is purple, fills to 78 percent and reads Renewal rate. The ring animates when it scrolls into view. Visitors see it once you save the page and it is published. ## Set up your circle counter Hover the element and open **More > Settings** in its control bar. Options: - **Percent:** how far the ring fills, from 0 to 100. - **Dimension:** the size of the circle in pixels, from 100 to 500. - **Foreground color:** the colour of the filled arc. - **Background color:** the colour of the empty track. - **Fill color:** the colour inside the circle. - **Foreground width:** the thickness of the arc. - **Animation:** fills the arc from zero. **Animation duration** and **Animation delay** set the timing in milliseconds. - **Animation in-viewport:** waits to animate until the circle scrolls into view. Every slider has a number box next to it for exact values. The **Circle content** section sets what shows in the middle: - **Show progress:** shows the percent number instead of your own text and icon. It is off by default. - **Text:** a short label. **Font size** and **Text color** style it. - **Info:** a smaller second line under the text. - **Icon:** an icon in front of the text. The dropdown next to **Search** limits the grid to one icon set. **Icon size** and **Icon color** style it. ## If you don't see it - **Circle counter is not in the Content tab.** Your user profile hides it. Ask an administrator to enable it in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). - **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area. - **The ring is faint or missing.** **Foreground color** and **Background color** are too close to the page colour. Hover the element and open **More > Settings**, then pick colours with more contrast. - **The ring does not animate.** **Animation** is off, or the ring waits until it scrolls into view. Switch **Animation** on and scroll the circle into view. - **Your text and icon do not show.** **Show progress** is on, so the ring shows the percent instead. Switch **Show progress** off under **Circle content**. ## What's next? [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your circle counter.