Circle Progress

This versatile widget allows you to display progress indicators in a visually appealing way.

View Live Demo

Content Tab

Content

• Type: Choose between 'Percent' or 'Custom' to define how the progress is displayed.
• Completed Progress: Input the numerical value representing the completed progress.
• Number Prefix: Add a prefix to the progress number if needed (e.g., "+", "$").
• Number Suffix: Add a suffix to the progress number (commonly "%").
• Animation Duration: Set the duration of the progress animation in milliseconds.

Additional Options

• Title: Enter a title for the circle progress element.
• Subtitle: Provide a subtitle, which could be additional information or a category.
• Progress Number Position: Select where the progress number will be displayed, such as 'Inside of Circle' or 'Outside of Circle'.
• Title & Subtitle Position: Choose the position for the title and subtitle relative to the circle. Options may include 'Outside of Circle', 'Inside of Circle', and others.

Style Tab

Progress Circle

• Circle Size: Adjust the overall size of the circle.
• Progress Circle Thickness: Set the thickness of the circle that indicates progress.
• Progress Indicator Thickness: Adjust the thickness of the progress indicator.
• Progress Endings: Choose the style of the progress indicator endings, such as 'Rounded' or 'Flat'.
• Circle Background Color: Select a color for the circle's background.
• Progress Circle Color: Choose a color for the progress circle itself.
• Progress Indicator Color: Pick a color for the indicator that shows the progress.
• Circle Box Shadow: Add a shadow effect to the circle if desired.

Content Style

• Numbers
  • Color: Select the color for the progress numbers.
  • Typography: Customize the typography for the progress numbers.
  • Padding: Adjust the padding around the progress numbers.
• Prefix
  • Font Size: Set the font size for the prefix.
  • Gap (px): Adjust the gap between the prefix and the progress numbers.
  • Alignment: Align the prefix to the left, center, or right.
• Suffix
  • Font Size: Set the font size for the suffix.
  • Gap (px): Adjust the gap between the suffix and the progress numbers.
  • Alignment: Align the suffix to the left, center, or right.
• Title
  • Color: Choose the color for the title text.
  • Typography: Customize the typography settings for the title.
  • Padding: Set the padding around the title.
• Subtitle
  • Color: Select the color for the subtitle text.
  • Typography: Customize the typography settings for the subtitle.
  • Padding: Adjust the padding around the subtitle.