---
title: Loading 加载
description: 加载组件，用于表示加载中的过渡状态，提升用户体验。
isComponent: true
usage: { title: "", description: "" }
spline: navigation
author: swimly
---

## 基本用法

加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景

{{ base }}

## 带文字的加载

通过`text`可设置加载组件的文本信息。

{{ all }}

## 纯文字加载

通过`indicator`可以设置加载图标是否显示，当设置为`false`时，加载组件将会只显示加载文本的内容。

{{ text }}

## 不同大小

通过`size`可以设置加载组件的大小，内置了：`small`，`medium`，`large`，如果这三个尺寸不合适也可以自定义大小，例如
：`size="24px"`

> 除了`size`可以设置其大小，还可通过`style`来设置组件的`font-size`来达到同样的目的。

{{ size }}

## 包裹内容

加载组件除了可以单独使用之外，其内部还可包裹其他布局组件。

{{ wrap }}

## 全屏加载

通过`fullscreen`属性可设置组件为全屏状态，会阻断用户的操作。

{{ fullscreen }}

## 函数方式调用

上面都是通过组件的形式进行调用，每次都要手动添加一个`l-loading`标签，不能满足某些使用场景，还可以通过`this.$loading`或
者`LoadingPlugin`以函数的形式进行调用，更符合加载的使用场景。

{{ plugin }}
