Progress Circle Fraction

Use the Progress Circle Fraction 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 create a button that increments the progress circle fraction each time it's clicked.

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

   The Progress Circle Fraction widget is displayed.

   

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

   

3. Right-click your screen name, select Add Local Variable, and enter a name. In this example, we enter Count.

   

4. Select the Progress Circle widget, and on the Properties tab, enter values for the Numerator and Denominator properties.

   In this example, we enter the Count variable as the numerator value, and 25 as the denominator value.

   

5. From the Toolbox, drag the Button widget into the Main Content area of your application's screen. In this example, call the button Increment and set the On Click property to a New Client Action that assigns the Count variable to Count + 1.

   

   

6. Select the Progress Circle Fraction widget, and on the Properties tab, you can change the Progress Circle Fraction's look and feel by setting the (optional) properties, for example, the color settings.

   

After following these steps and publishing the module, you can test the pattern in your app. The result of this example should look someting like the following: