<kbq-progress-bar> is a component that allows display progress bar.

A <kbq-progress-bar> element can be used on its own to create a horizontal progress line with koobiq theme

<kbq-progress-bar></kbq-progress-bar>

Displaying length of progress bar depends on this property
The range of value is [0, 100]
Default: 0

This will fill 30% of the hole progress bar

<kbq-progress-bar [value]="30"></kbq-progress-bar>

Enum ('determinate', 'indeterminate')
Default: 'determinate'

To show indeterminate progress

<kbq-progress-bar [mode]="'indeterminate'"></kbq-progress-bar>

Or for determinate progress

<kbq-progress-bar [mode]="'determinate'" [value]="30"></kbq-progress-bar>

Enum ('primary', 'secondary', 'error')
Default: 'primary'
Set theming of element

<kbq-progress-bar [color]="themePalette.Primary"></kbq-progress-bar>
<kbq-progress-bar [color]="themePalette.Secondary"></kbq-progress-bar>
<kbq-progress-bar [color]="themePalette.Error"></kbq-progress-bar>

The color of a <kbq-progress-bar> can be changed by using the color property. By default, it use the theme's primary color. This can be changed to 'secondary' or 'error'.