---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/drag-and-drop-elements/circle-counter'
title: 'Circle Counter'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:27:39+00:00'
updated: '2023-11-06T09:28:08+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: documentation
summary: 'Arrange and display statistics on your Drupal website using the powerful Circle counter tool!Follow the steps below to start using the Circle Counter element in your website:'
tags:
  - 'Drag and drop elements'
published: true
---
##  [Circle Counter](/hc/documentation/learn-dxpr-builder/drag-and-drop-elements/circle-counter) 

Arrange and display statistics on your Drupal website using the powerful Circle counter tool!

Follow the steps below to start using the Circle Counter element in your website:

1. Click on the **+** icon
2. Go to the **Content** tab
3. Select a color option in the **Foreground** settings. This is the top ring, which will display the percentage
4. Select a background color in the **Background** settings. This is the background of the top ring
5. Set a color for the fill of the counter in **Fill** settings. This is the inside of the circle
6. *Optionally*, Switch **On** the **Half Circle** settings
7. Manage the **Dimension** and **Width** of the circle. Dimension being the radius of the circle and Width the thickness of the top ring
8. Set the counter time in percentage in the **Percent** field. For example 50 will be half the circle.
9. Select an option from the **Border Style** setting to choose from various preset styles
10. Once you’ve selected your preferred settings, you can click on **Save Changes** and you're done!

### Customizing your circle counter 

1. Go to the **Circle Content** tab to give the counter a **Text**, **Font Size** and **Icon**
2. Fill in the **Text** field with your preferred wording. This will appear to the top inside the circle
3. Fill in the **Info** field to add additional information of the text. This will appear underneath the Text in the circle
4. Go to the **Icon** tab to select and add an icon to the center of counter
5. Once you’ve selected your preferred settings, you can click on **Save Changes** and you're done!