Circle Info

The Circle Info module draws a circular progress ring with a number in the center. A title and a line of supporting text sit below it. Use it to show a single stat, such as a completion rate or a satisfaction score. To show several stats, add one module for each.

Add a Circle Info module

1. Add a section and row, then add the Circle Info module.
2. Set the Percent the ring should fill to.
3. Enter the Number, Title and Subtext.
4. In the Design tab, set the circle size and colors.

Content Tab

Content

• Percent: How much of the ring the colored arc fills, from 0 to 100. Default is 75.
• Number: The number shown in the center. Default is 75. It is separate from Percent, so keep them in step yourself.
• Number Suffix: Text shown after the number. Default is %.
• Title: The heading shown below the circle.
• Subtext: Supporting text shown below the title.

Design Tab

Circle

• Circle Size: The width and height of the ring. Default is 160px.
• Stroke Width: The thickness of the ring. Default is 12px.
• Fill Color: The color of the progress arc. Default is #2EA3F2.
• Track Color: The color of the ring behind the arc. Default is #e6e6e6.

Number, Title and Subtext

Each has its own font styling group in the Design tab.

Behavior

The arc starts at the top of the circle and fills clockwise to the set percentage. The fill plays as a short animation when the module renders.