Skip to main content




Applies only to Traditional Web Apps
Service Studio version:

Progress Circle Reference

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Layout and classes

    CSS selectors

    Element CSS Class Description
    .progress-circle .progress-circle .progress-circle-content When IsSemiCircle parameter is False
    .progress-circle .progress-circle .progress-semi-circle-content When IsSemiCircle parameter is True

    Advanced use case

    Change color of progress circle based on value

    1. On your screen, create a local variable called Progress (Integer type).

    2. Drag the Progress Circle pattern into the preview.

    3. Set the Value of the Progress Circle's Progress parameter.

    4. To change the color of the Progress Circle based on values, create a condition and set limits.

      In this example, 3 colors represent different states of progress. Set the value of the ProgressColor parameter to If(Progress <= 50, Entities.Color.Red, If( Progress > 50 and Progress < 75, Entities.Color.Yellow , Entities.Color.Green)).

    5. Publish and test.

    Remove the round corners of the Progress Circle

    To remove the round corners, use this CSS snippet.

    .progress-circle svg {
        stroke-linecap: square;

    Change the trail thickness of the Progress Circle

    To change the trail thickness, set the AdvancedFormat property to {trailWidth: 1}.

    • Was this article helpful?