Drupal 8 Jollyness

5.10. Circle Progress Bar

Last updated: Sat Feb 16 2019

This element support you to create a circle progress bar like this

Attributes

Title: The element title

Rerender Element: you can select the html render element for the title. It can be heading element or div

Icon (optional): This option supports you to add an icon the the element

Percent: The possible value can be from 1-100

Content: Content below the progress bar

Progress Bar Settings

If you don't change the settings, it will use the default settings of the element.

Setting option:

Progress Alignment: The alignment of the progress bar, the possible value can be Left, Center, Right

Circle Radius: Set radius of the circle, the value should be from 20 to 500. This value will be used as the size of the circle progress bar

Circle Border: The border width of the circle, the value should be from 1px to 150px

Progress color: The background color of the progress bar

Progress bar color: The background color of the circle bar

Duration: The duration time of progress bar animation