##  [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!