Skip to content

Adding a Circle Counter

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.

Circle counter with a purple progress arc filled to 78%, a chart icon and the label Renewal rate

Add a circle counter

Open your page while logged in: the builder controls appear when you hover the content area. Your 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.
  • 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 to change spacing and background for your circle counter.

Something wrong or missing on this page? Report it or edit the page.