| 1 | @# Progress bar
|
| 2 |
|
| 3 | Progress bars indicate progress towards the completion of a task or an
|
| 4 | indeterminate loading state.
|
| 5 |
|
| 6 | @reactExample ProgressExample
|
| 7 |
|
| 8 | @## Props
|
| 9 |
|
| 10 | `ProgressBar` is a simple stateless component that renders the appropriate HTML
|
| 11 | markup. It supports a `value` prop between 0 and 1 that determines the width of
|
| 12 | the progress meter. Omitting `value` will result in an "indeterminate" progress
|
| 13 | meter that fills the entire bar.
|
| 14 |
|
| 15 | @interface IProgressBarProps
|
| 16 |
|
| 17 | @## CSS
|
| 18 |
|
| 19 | Set the current progress of the bar via a `width` style rule on the inner
|
| 20 | `.@ns-progress-meter` element. This is a very simple CSS-only component, and
|
| 21 | input validation for `width` values is limited: values above `100%` appear as
|
| 22 | 100% progress and values below `0%` appear as 0%.
|
| 23 |
|
| 24 | Omitting `width` will result in an "indeterminate" progress meter that fills the
|
| 25 | entire bar.
|
| 26 |
|
| 27 | @css progress-bar
|