ion-progress-bar
进度条用于告知用户进行中任务的状态，例如应用加载、表单提交或保存更新。进度条有两种类型：determinate（确定型）和 indeterminate（不确定型）。
确定型进度条
确定型是默认类型。 当操作进度百分比已知时应使用此类型。通过设置 value 属性来显示进度，可用于展示从轨道 0% 到 100% 的进度增长过程。
缓冲状态
若设置了 buffer 属性，将显示带有动画圆点的缓冲流以指示活动状态。buffer 属性的值也会通过可见轨道的长度来体现。如果 buffer 的值小于 value 属性，则不会显示可见轨道。若 buffer 等于 1，缓冲流将被隐藏。
不确定型进度条
不确定型应用于无法预估任务所需时间的情况。该进度条不与 value 值绑定，而是在任务完成前持续在轨道上滑动。
工具栏中的进度条
主题定制
颜色
CSS 自定义属性
CSS Shadow Parts
属性
buffer
| Description | If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1]. |
| Attribute | buffer |
| Type | number |
| Default | 1 |
color
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
mode
| Description | The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
reversed
| Description | If true, reverse the progress bar direction. |
| Attribute | reversed |
| Type | boolean |
| Default | false |
type
| Description | The state of the progress bar, based on if the time the process takes is known or not. Default options are: "determinate" (no animation), "indeterminate" (animate from left to right). |
| Attribute | type |
| Type | "determinate" ｜ "indeterminate" |
| Default | 'determinate' |
value
| Description | The value determines how much of the active bar should display when the type is "determinate". The value should be between [0, 1]. |
| Attribute | value |
| Type | number |
| Default | 0 |
事件
No events available for this component.
方法
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
progress | The progress bar that shows the current value when type is "determinate" and slides back and forth when type is "indeterminate". |
stream | The animated circles that appear while buffering. This only shows when buffer is set and type is "determinate". |
track | The track bar behind the progress bar. If the buffer property is set and type is "determinate" the track will be the width of the buffer value. |
CSS 自定义属性
| Name | Description |
|---|---|
--background | Background of the progress track, or the buffer bar if buffer is set |
--buffer-background | DEPRECATED, use --background instead |
--progress-background | Background of the progress bar representing the current value |
插槽
No slots available for this component.