版本：v8

ion-loading

scoped

一种覆盖层，可用于指示活动状态，同时阻止用户交互。加载指示器显示在应用内容上方，可由应用关闭以恢复用户与应用之间的交互。它包含一个可选背景层，可通过在创建时设置 showBackdrop: false 来禁用它。

基本用法

一旦显示，加载指示器默认将无限期显示。开发者可以在创建后通过调用组件的 dismiss() 方法手动关闭加载指示器。可以调用 onDidDismiss 函数在加载指示器关闭后执行操作。

另外，开发者可以配置加载指示器在特定时间后自动关闭，方法是在加载选项的 duration 中传入要显示的毫秒数。

内联方式（推荐）

控制器方式

自定义

旋转器

使用的旋转器可以通过 spinner 属性进行自定义。有关完整选项列表，请参阅旋转器属性文档。

主题

Loading 使用作用域封装，这意味着它会在运行时通过为每个样式附加一个额外类来自动限定其 CSS 的作用域。覆盖作用域选择器需要具有更高特异性的选择器。

我们建议传入一个自定义类，并使用该类为宿主元素和内部元素添加自定义样式。

备注

ion-loading 在应用的根层级显示，因此我们建议将任何 ion-loading 的样式放在全局样式表中。

无障碍

Ionic 会自动将 Loading 的 role 设置为 dialog。

如果为 Loading 定义了 message 属性，则 aria-labelledby 属性将自动设置为消息元素的 ID。否则，aria-labelledby 将不会被设置，开发者必须使用 htmlAttributes 属性提供 aria-label。

所有 ARIA 属性都可以通过在 Loading 的 htmlAttributes 属性中定义自定义值来手动覆盖。

接口

LoadingOptions

interface LoadingOptions {
  spinner?: SpinnerTypes | null;
  message?: string | IonicSafeString;
  cssClass?: string | string[];
  showBackdrop?: boolean;
  duration?: number;
  translucent?: boolean;
  animated?: boolean;
  backdropDismiss?: boolean;
  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;
  htmlAttributes?: { [key: string]: any };

  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
}

属性

animated

说明	If `true`, the loading indicator will animate.
属性	`animated`
类型	`boolean`
默认值	`true`

backdropDismiss

说明	If `true`, the loading indicator will be dismissed when the backdrop is clicked.
属性	`backdrop-dismiss`
类型	`boolean`
默认值	`false`

cssClass

说明	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
属性	`css-class`
类型	`string ｜ string[] ｜ undefined`
默认值	`undefined`

duration

说明	Number of milliseconds to wait before dismissing the loading indicator.
属性	`duration`
类型	`number`
默认值	`0`

enterAnimation

说明	Animation to use when the loading indicator is presented.
属性	`undefined`
类型	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
默认值	`undefined`

htmlAttributes

说明	Additional attributes to pass to the loader.
属性	`undefined`
类型	`undefined ｜ { [key: string]: any; }`
默认值	`undefined`

isOpen

说明	If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.
属性	`is-open`
类型	`boolean`
默认值	`false`

keyboardClose

说明	If `true`, the keyboard will be automatically dismissed when the overlay is presented.
属性	`keyboard-close`
类型	`boolean`
默认值	`true`

leaveAnimation

说明	Animation to use when the loading indicator is dismissed.
属性	`undefined`
类型	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
默认值	`undefined`

message

说明	Optional text content to display in the loading indicator. This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
属性	`message`
类型	`IonicSafeString ｜ string ｜ undefined`
默认值	`undefined`

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	`mode`
类型	`"ios" ｜ "md"`
默认值	`undefined`

showBackdrop

说明	If `true`, a backdrop will be displayed behind the loading indicator.
属性	`show-backdrop`
类型	`boolean`
默认值	`true`

spinner

说明	The name of the spinner to display.
属性	`spinner`
类型	`"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined`
默认值	`undefined`

translucent

说明	If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports `backdrop-filter`.
属性	`translucent`
类型	`boolean`
默认值	`false`

trigger

说明	An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
属性	`trigger`
类型	`string ｜ undefined`
默认值	`undefined`

事件

Name	说明	冒泡
`didDismiss`	Emitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss.	`true`
`didPresent`	Emitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss.	`true`
`ionLoadingDidDismiss`	Emitted after the loading has dismissed.	`true`
`ionLoadingDidPresent`	Emitted after the loading has presented.	`true`
`ionLoadingWillDismiss`	Emitted before the loading has dismissed.	`true`
`ionLoadingWillPresent`	Emitted before the loading has presented.	`true`
`willDismiss`	Emitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss.	`true`
`willPresent`	Emitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent.	`true`

方法

dismiss

说明	Dismiss the loading overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the remove method.
签名	`dismiss(data?: any, role?: string) => Promise<boolean>`
参数	data: Any data to emit in the dismiss events. role: The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.

onDidDismiss

说明	Returns a promise that resolves when the loading did dismiss.
签名	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

说明	Returns a promise that resolves when the loading will dismiss.
签名	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

说明	Present the loading overlay after it has been created.
签名	`present() => Promise<void>`

CSS Shadow Parts

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

Name	说明
`--backdrop-opacity`	Opacity of the backdrop
`--background`	Background of the loading dialog
`--height`	Height of the loading dialog
`--max-height`	Maximum height of the loading dialog
`--max-width`	Maximum width of the loading dialog
`--min-height`	Minimum height of the loading dialog
`--min-width`	Minimum width of the loading dialog
`--spinner-color`	Color of the loading spinner
`--width`	Width of the loading dialog

Name	说明
`--backdrop-opacity`	Opacity of the backdrop
`--background`	Background of the loading dialog
`--height`	Height of the loading dialog
`--max-height`	Maximum height of the loading dialog
`--max-width`	Maximum width of the loading dialog
`--min-height`	Minimum height of the loading dialog
`--min-width`	Minimum width of the loading dialog
`--spinner-color`	Color of the loading spinner
`--width`	Width of the loading dialog

插槽

该组件没有可用的插槽。

基本用法​

内联方式（推荐）​

控制器方式​

自定义​

旋转器​

主题​

无障碍​

接口​

LoadingOptions​

属性​

animated​

backdropDismiss​

cssClass​

duration​

enterAnimation​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

message​

mode​

showBackdrop​

spinner​

translucent​

trigger​

事件​

方法​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSS Shadow Parts​

CSS 自定义属性​

插槽​

目录