Circular Progress Bar Specification

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.

Objectives

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

Developer

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">
</igx-circular-bar>

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

Have determinate circular progress bar that shows only increasing action.
Have circular progressive bar that only increases in the clockwise direction starting from the position of 12 o’clock.
The progress should support transition animation and must dynamically display the progress percentage.
Value and Max must be configurable through the API.
Text which shows the progress of the bar should be able to change its state to hidden.
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.

Functionality

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:

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

Navigation

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

API

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.