Skip to Content
Technical Articles
Author's profile photo Rohit Chouhan (Deloitte)

Create and Display Beautiful Circle Progress Bar in SAP Analytics Cloud

The Circle Progress Bar Widget is a custom widget developed for SAP Analytics Cloud that provides a visually appealing circular progress bar to display progress, percentage, or any other value. In this article, we will explore the features of the widget, how to use it in your SAP UI5 project, and how to customize it to meet your specific needs.



To use this widget in your SAP application, follow these steps:

  • Download the CircleProgressBarWidget.json file from the URLs specified in the webcomponents property of the JSON.
  • Go to your SAC Portal, select Analytic Application from the left side bar, and then go to the Custom Widget tab.
  • Click on the + icon on the right side and select the CircleProgressBarWidget.json file that you downloaded.
  • You’re done! You can now use it in your app.


The widget has the following methods:

Set Methods

Method Parameter Type Description
setPercentage(percentage) integer Set Percentage
setBarColor(barColor) string Set Bar Color
setEmptyBarColor(emptyBarColor) string Set Empty Bar Color

get Methods

Method Return Type Description
getPercentage() integer return Percentage
getBarColor() string return Bar Color
getEmptyBarColor() string return Empty Bar Color


The Circle Progress Bar Widget is a great addition to any SAP UI5 project, as it enhances the user experience by providing a visually appealing way to display progress or percentage values. Its customizable parameters make it adaptable to a variety of use cases, and its ease of use allows developers to quickly and easily implement it into their projects. With the Circle Progress Bar Widget, you can take your SAP UI5 projects to the next level and provide a more engaging user experience.

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Akhil G S
      Akhil G S

      Thank you for the custom widget, this was exactly what we were looking for since SAC does not have a built in solution for a progress bar, my query is how to change the setPercentage method input to a number from the default integer, the values that we need to display have 2 decimal points.