Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

ProgressCircle

  • Edit
  • Easy to create circular or semi-circular progress indicators.

    When to use

    Use the Progress Circle to show the current progress of an operation flow. The progress is incremented in fractions of the circular badge. You can also show progress in a Progress Bar or Progress Circle Fraction display type. Be consistent when using a pattern to show progress of a task, for instance, if an action displays a linear indicator on one screen, that same action should not use a circular indicator elsewhere in the app.

    How to use

    Create your custom content and put it inside the content placeholder.

    1. Drag the ProgressCircle pattern into the preview.

    2. Define the progress value.

    3. Set the required content in the placeholder.

    4. Publish and test.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    Progress Percentage to display, you can use functions or local variables. Integer True none
    ProgressColor The color of the stroke on progress circle. Color Identifier False Entities.Color.Primary
    TrailColor The color of the empty part of the progress circle. Color Identifier False Entities.Color.Neutral5
    CircleThickness The thickness of the circle that marks the progress. Integer False 4
    AnimateInitialProgress Animate the progress circle from zero to progress value. Boolean False True
    IsSemiCircle Change the type of progress bar from circle to semi circle. Boolean False False
    AdvancedFormat Allow for more options beyond what it's provided through the input parameters. For more information visit: https://kimmobrunfeldt.github.io/progressbar.js/. Example: { easing: 'bounce' } Text False none

    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. In your screen, create a local variable "Progress" of type Integer.

    2. Drag the ProgressCircle pattern into the preview.

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

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

      In this example, 3 colors represent diferent 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 ProgressCircle

    To remove the round corners, use this CSS snippet.

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

    Change the trail thickness of ProgressCircle

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

    • Was this article helpful?