Skip to content

Circular progress

A circular progress that would display current progress compare to total image

Name Description
component circular-progress
text text label to display to the right of the progress
options see options below

Options

Name Description
value double value between 0 and 1 that show the overall progress
max double max value
color redgreen, blue, progress color
fillColor color of the progress circle
display percent, value, no-progress, how to display the value in the circular progress, if not provided, display nothing. If no-progress, value is displayed but there is no progress indicator
radius double, radius of the progress, can be null
lineWidth double, width of the current progress circle

Example

      {
        "component": "circular-progress",
        "text": "Today's tasks",
        "options": {
          "value": "{$sources.taskProgress.values.progress}",
          "display": "percent"
        },
        "styles": {
          "root": {
            "padding": "10px 0px"
          },
          "header": {
            "fontWeight": "bold"
          }
        }
      }