Linear 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 Linear Progress Bar provides the ability to display a single-line bar with its state changes. The value property determines the load state. The size of the filed-in part is calculated as percentage based on the current value vs the max value. The default max value is 100. The progress bar does not interact with the end-user and is read-only, i.e. the user could not change its state.

Objectives

The progress bar aims at expanding the Ignite UI for Angular control set. 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 Linear Progress Bar and visually matches the Material Guidelines indeterminate state.
As a developer I want to be able to display linearly certain progress for a concrete action so that the end-users know how much a task has been completed.
As a developer I want to be able to implement different linear progress bar visual styles so that I can integrate it better with the overall look and feel of the application.
As a developer I would like to hide, show, change the position and override the text which linear progress bar shows.

<igx-linear-bar [striped]="false" [value]="currentValue" [max]="200">
</igx-linear-bar>

<igx-linear-bar [striped]="false" [value]="currentValue" [max]="200" 
    [textVisibility]="true" [textTop]="true" [textAlign]="position">
</igx-linear-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 as percentage or any other indication, so that I can know how much of the task/action was done.
As an end user, I want to have linear progress bars with different styles, so that it matches the overall look and feel of the application

Acceptance criteria

Have linear progressive bar that shows increasing and decreasing action.
The progress bar must have a type (Default, Warning, Danger, Info, Success) changing its background color.
The progress bar must indicate the current state as percentage and display it as such or any other way.
The progress should have transition animation.
The linear progress bar should support different styling – stripped and solid color.
Value and max must be configurable through the API.
The default text value should be modifiable.
The text of the progress bar should be able to be hidden.
The text of the linear bar must have the ability to change its alignment(start, center, end) and position(top, bottom).
NEW The linear 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 linear progress indicator should fill from 0% to 100% and never decrease in value or loop for an unknown period of time to show an ongoing operation that is unclear how long will take.

Developer Experience

max: Maximum value that can be passed.
value: Precise value between 0 and Max (maximum value that can be passed to progress bar.)
type of progress bars which sets the background color of the bar - Default, Warning, Danger, Info, Success
animate - Transition (css)
striped - Background-image (css-linear-gradients)
textAlign - Alignment of the text (start, center, end).
textTop - determines whether the text should be positioned above the progress bar.
textVisibility - determines whether the text should be visible.
text - changes the default text value.

User Interface

The end user interface consists of:

Progress bar container
Five color options for the progress bar that fill in the container from left to right.
Visual representation of the progress as percentage value followed by the % symbol.

Navigation

The end-user will not interact with the progress bar.

API

Options

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

`igx-linear-bar` Inputs

max - should set maximum value that can be passed.
type - should Set type of the linear bar. Possible options - default, success, info, warning and danger.
value - should set value that indicates the completed bar position.
stripped -should set bar to have striped style.
animate - determines whether the animation is activated.
textAlign - changes the alignment of the text.
textVisibility - hide/show the text
textTop - Text appears above the progress bar.
text - Changes the default text value.

`igx-linear-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-linear-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-linear-bar` Methods External

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.