Skip to main content








Applies only to Mobile Apps and Reactive Web Apps




Progress Circle

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Progress Circle UI Pattern to show the current progress of an operation flow. The progress is incremented in fractions of the circular badge.

    How to use the Progress Circle UI Pattern

    In this example, we display the percentage of shipped orders from an existing Customer Order Database.

    1. In Service Studio, in the Toolbox, search for Progress Circle.

      The Progress Circle widget is displayed.

    2. From the Toolbox, drag the Progress Circle widget into the Main Content area of your application's screen.

    3. Right-click your screen name and select Add Preparation.

    4. From the Toolbox, drag an Aggregate onto the screen preparation, and enter a name for the aggregate. In this example, we call the aggregate GetTotalOrders.

    5. To add a database entity, double-click the aggregate you just created and click on the aggregate screen.

    6. From the Select Source pop-up, choose the source entity and click OK. In this example, we select the Order database.

    7. Return to the screen preparation, and add another aggregate (See step 4). In this example we call the second aggregate GetShippedOrders.

    8. To add the relevant database entity, repeat steps 5 and 6.

    9. On the aggregate screen, click Filters, then Add Filter.

    10. In the Filter Condition pop-up, add the relevant logic for the filter and click DONE. In this example, to get all of the shipped orders, we add the following logic:

      Order.Status = Entities.OrderStatus.Shipped

    11. Double-click your screen name, and on the Properties tab, from the Progress drop-down, select Expression Editor. Enter the logic for the progress circle and click DONE. This displays the percentage value as the stroke on the Progress Circle.

      In this example, to show the percentage of shipped orders, we add the following:

      GetShippedOrders.Count / GetTotalOrders.Count * 100

    12. From the Toolbox, drag an Expression widget into the Progress Circle's Content placeholder, and on the Properties tab, from the Value drop-down, select Expression Editor.

    13. In the Expression Editor, enter the same logic as in step 11 (GetShippedOrders.Count / GetTotalOrders.Count * 100), and click DONE. This displays the percentage value inside the Progress Circle.

    14. On the Properties tab, you can also change the Progress Circle's look and feel by setting the (optional) properties, for example, the color and animation settings.

    After following these steps and publishing the module, you can test the pattern in your app.


    Property Description
    Progress (Integer): Mandatory Percentage to display. You can use functions or local variables.
    ProgressColor (Color Identifier): Optional The color of the stroke on progress circle. Red, orange, yellow, lime, green, blue, violet, and pink are just some of predefined colors available.


    • Blank - The stroke color displays in the color you chose when creating the app (default value).
    • Entities.Color.Red - The stroke color is red.
    TrailColor (Color Identifier): Optional The color of the empty part of the progress circle.


    • Blank - The empty part of the circle is a light gray (Entities.Color.Neutral5). This is the default value.
    • Entities.Color.Blue - The empty part of the progress circle is blue.
    CircleThickness (Integer): Optional The thickness of the circle that marks the progress.


    • Blank - The circle thickness is 4px. This is the default value.
    • 8 - The circle thickness is 8px.
    AnimateInitialProgress (Boolean): Optional If set to True, the progress from zero to the progress value is animated. This is the default value. If set to False, the progress is not animated.
    IsSemiCircle (Boolean): Optional If True, the Progress Circle is changed from a circle to semi circle. If False, it remains a circle. This is the default value.
    AdvancedFormat (Text): Optional Allow for more options beyond what is provided through the input parameters. For more information, visit: Example: { easing: 'bounce' }
    • Was this article helpful?