Skip to content

Circular Progress Bar Specification

Stefan Ivanov edited this page Dec 7, 2018 · 11 revisions
Version User Date Notes
0.1 S. Bozalieva 2018 Initial draft
0.2 Stefan Ivanov 5.12.18 Adding stories for indeterminate state

The Circular Progress Bar component provides the ability to display a round progress bar and its state changes. The value property determines the load state. The size of the filled-in part is calculated as percentage based on the current value vs the max value property. The default max value is 100. The circular progress bar shows percentage value, does not interact with the end-user and is read-only, i.e. the user could not change its state or value.


The circular progress bar component is a new Ignite UI for Angular component. It is providing minimal API for the most common use cases, leaving maximum flexibility in developer hands. It follows the mobile-first approach and should be suitable for hybrid applications.

User Stories


  • NEW As a developer I want to be able to display an infinitely looping loading progress for an action whose completion is unknown. This mode is achievable by a property on the Circular Progress Bar and visually matches the Material Guidelines indeterminate state.

  • As a developer I want to be able to display certain progress for a concrete action so that the end-users know how much of a task has been completed.

  • As a developer I want to be able to implement determinate circular progress bar visual styles so that I can integrate it better with the overall look and feel of the application.

  • As a developer I want to be able to implement a circular progress bar with starting position at 12 o’clock that increases in clockwise direction.

<igx-circular-bar (onProgressChanged)="f($event)" [value]="currentValue">

End user

  • NEW As an end user, I want to be given an indication for any process that is taking place behind the scenes and prevents me from making further actions until complete e.g. a remote data that is being loaded to populate the UI.

  • As an end user, I want to be given a visual representation of how much a task or an action has been completed, so that I can be better informed about its state.

  • As an end user, I want to have circular progress bars, so that it matches the overall look and feel of the application.

Acceptance criteria

  1. Have determinate circular progress bar that shows only increasing action.
  2. Have circular progressive bar that only increases in the clockwise direction starting from the position of 12 o’clock.
  3. The progress should support transition animation and must dynamically display the progress percentage.
  4. Value and Max must be configurable through the API.
  5. Text which shows the progress of the bar should be able to change its state to hidden.
  6. NEW The circular progress bar should provide an indeterminate mode to indicate an operation that is not clear how long will be needed until completion.


End User Experience

The circular progress indicator should always fill from 0% to 100% in clockwise direction and never decrease in value.

Developer Experience

Max: Maximum value that can be passed.

Value: Precise value between 0 and Max

animate: Transition (CSS)

TextVisibility: Hide/Show the text.

Background-color: styled through the CSS

User Interface

The end user interface consists of:

  1. Value positioned in the middle of the circle showing the current state as percentage (between 0 and max)
  2. Clockwise increasing circle showing progress between 0% and 100%.


The end-user must not be able to change the circular progress bar value, max and size.


You should be able to configure the igx-linear-bar and igx-circular-bar by passing an Options object to it. It should be able to override methods of Options object.

igx-circular-bar Inputs

  • max - set maximum value that can be passed. Default max value is 100.
  • value - set value that indicates the completed bar position.
  • animate - animation on progress bar
  • textVisibility - Show/Hide the text.

igx-circular-bar Getters

  • animate - returns if the animation is activated.
  • max - returns the max value.
  • value - returns passed value.
  • valueInPercent - returns passed value into percentage representation based on max value.

igx-circular-bar Setters

  • valueInPercent - Converts passed value into percentage and put it in appropriate range between min and max values.
  • animate - Enable/Disabled the animation.
  • max - Sets maximum fill range of the progress bar.
  • value - Puts the value in range between min and max and update the progress bar indicator.

igx-circular-bar External Methods

  • getValueInProperRange(value, max, min) - validate passed value to to be in range between min(0) and max.
  • convertInPercentage(value, max) - converts value into percentage based on passed number and max value.

igx-circular-bar Getters

  • onProgressChanged - exposed event, that could be handled to track progress changing

ARIA support



The circular bar has the following attributes:

Clone this wiki locally
You can’t perform that action at this time.