Super Circular Progress

Super Circle Progress module will display the progress in the attractive form of circle progress bar. The module has different style settings, such as content style, bar type, gradient color etc.

Circle Progress Module Sample #

On the picture below you can view Circle Progress module sample.

Content #

#

Display Options #

• Title – Here user will input the title of the circle progress
• Description – Here user will input the description of the circle progress.
• Width & Height – Here user will specify the height and width of the circle progress.
• Progress Percentage – User will need to select the progress percentage.
• Line Cap – Here user will select the cap for the progress bar. It can be flat or rounded.
• Color – User will select the color of the circle.
• Empty Fill Color – Here user will select the color of the empty portion of the circle.
• Progress bar thickness ­– Here you will need to specify the bar thickness
• Animation Duration – Here user will choose the animation duration the circle progress.

Style #

Title #

• Margin – You can input the values for the headline margins in the required fields.
• Padding – Here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding.
• Title Color – Here user will select the title color.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.

Description #

• Padding – Here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding.
• Description Color – Here user will select the color of the description.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.

Progress Bar Design Style #

• Padding – Here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding.
• Description Color – Here user will select the color of the progress digit.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.
• Top Position – Here user will specify the top position f the progress digit
• Left Position – Here user will specify the left position f the progress digit
• Color – From here user will select the color of the progress digit.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.