版本：v7

ion-loading

scoped

这是一种浮层组件，可用于在阻止用户交互的同时指示活动状态。加载指示器显示在应用程序内容之上，应用程序可将其关闭以恢复用户交互。它包含一个可选的背景幕，创建时可通过设置 showBackdrop: false 来禁用。

基本用法

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

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

内联方式（推荐）

控制器方式

自定义

旋转器

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

主题

Loading 组件使用作用域封装，这意味着它会在运行时通过为每个样式追加一个额外的类来自动限定其 CSS 范围。要覆盖 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

Description	If `true`, the loading indicator will animate.
Attribute	`animated`
Type	`boolean`
Default	`true`

backdropDismiss

Description	If `true`, the loading indicator will be dismissed when the backdrop is clicked.
Attribute	`backdrop-dismiss`
Type	`boolean`
Default	`false`

cssClass

Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	`css-class`
Type	`string ｜ string[] ｜ undefined`
Default	`undefined`

duration

Description	Number of milliseconds to wait before dismissing the loading indicator.
Attribute	`duration`
Type	`number`
Default	`0`

enterAnimation

Description	Animation to use when the loading indicator is presented.
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

htmlAttributes

Description	Additional attributes to pass to the loader.
Attribute	`undefined`
Type	`undefined ｜ { [key: string]: any; }`
Default	`undefined`

isOpen

Description	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.
Attribute	`is-open`
Type	`boolean`
Default	`false`

keyboardClose

Description	If `true`, the keyboard will be automatically dismissed when the overlay is presented.
Attribute	`keyboard-close`
Type	`boolean`
Default	`true`

leaveAnimation

Description	Animation to use when the loading indicator is dismissed.
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

message

Description	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.
Attribute	`message`
Type	`IonicSafeString ｜ 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`

showBackdrop

Description	If `true`, a backdrop will be displayed behind the loading indicator.
Attribute	`show-backdrop`
Type	`boolean`
Default	`true`

spinner

Description	The name of the spinner to display.
Attribute	`spinner`
Type	`"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined`
Default	`undefined`

translucent

Description	If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports `backdrop-filter`.
Attribute	`translucent`
Type	`boolean`
Default	`false`

trigger

Description	An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
Attribute	`trigger`
Type	`string ｜ undefined`
Default	`undefined`

事件

Name	Description	Bubbles
`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

Description	Dismiss the loading overlay after it has been presented.
Signature	`dismiss(data?: any, role?: string) => Promise<boolean>`
Parameters	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"`. 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.

onDidDismiss

Description	Returns a promise that resolves when the loading did dismiss.
Signature	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

Description	Returns a promise that resolves when the loading will dismiss.
Signature	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

Description	Present the loading overlay after it has been created.
Signature	`present() => Promise<void>`

CSS 阴影部件

No CSS shadow parts available for this component.

CSS 自定义属性

Name	Description
`--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

插槽

No slots available for this component.

基本用法​

内联方式（推荐）​

控制器方式​

自定义​

旋转器​

主题​

无障碍访问​

接口​

LoadingOptions​

属性​

animated​

backdropDismiss​

cssClass​

duration​

enterAnimation​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

message​

mode​

showBackdrop​

spinner​

translucent​

trigger​

事件​

方法​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSS 阴影部件​

CSS 自定义属性​

插槽​

Contents