Loading（加载）插件可以在您的页面内容上方显示一个带有旋转器的遮罩层，告知用户后台正在执行某个操作。无需在页面中添加复杂的全局加载逻辑。
// quasar.config file
return {
framework: {
plugins: [
'Loading'
],
config: {
loading: /* look at QuasarConfOptions from the API card */
}
}
}content_paste
用法
Loading 会延迟（500ms）再显示，这样快速操作就不会导致屏幕闪烁。原理是：如果操作很快完成，加载旋转器还没来得及显示就被隐藏了，用户根本察觉不到。这种延迟机制避免了不必要的视觉干扰。
在 Vue 组件内部：
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.loading.show({
delay: 400 // ms
})
$q.loading.hide()
}content_paste
在 Vue 组件外部：
import {
Loading,
// 可选！下面的例子中用于
// 自定义旋转器
QSpinnerGears,
} from "quasar";
// 使用默认配置
Loading.show();
// 完全自定义
Loading.show({
spinner: QSpinnerGears,
// 其他属性
});
Loading.hide();content_paste
默认配置
自定义
内容安全过滤
多个并行加载分组 v2.8+
TIP
当有多个并行进程时，可以将 Loading 实例分组，从而独立管理每个分组的加载状态。
通过在创建 Loading 实例时指定 group 属性，您可以使用返回的函数来更新或隐藏对应的分组。
显然，同一时刻只能显示一个分组，因此创建顺序决定了显示优先级——最后创建的分组优先显示（后进先出，LIFO）。
您可以使用返回的函数来显示/更新/隐藏分组，也可以直接调用 Loading.show({ group: '..分组名..', ... }) 或 Loading.hide('..分组名..')。
以下两种方式完全等价（您甚至可以混合使用）：
/**
* 第一种方式
*/
// 创建分组
const myLoadingGroup = Loading.show({
group: 'my-group',
message: 'Some message'
})
// 传入参数，更新该分组
myLoadingGroup({ message: 'Second message' })
// 不传参数，通知 Quasar 隐藏该分组
myLoadingGroup()
/**
* 第二种等价方式
*/
// 创建分组
Loading.show({
group: 'my-group',
message: 'Some message'
})
// 更新分组（此时需要指定分组名）
Loading.show({
group: 'my-group'
message: 'Second message'
})
// 隐藏指定分组
Loading.hide('my-group')content_paste
WARNING
请注意，不带参数调用 Loading.hide() 会隐藏所有分组。因此如果您使用了分组功能，建议始终在调用 hide() 时传入分组名。
设置默认值
如果想设置一些默认值而不必每次都重复指定，可以通过 quasar.config 文件中的 framework > config > loading: {…} 来配置，也可以调用 Loading.setDefaults({...}) 或 $q.loading.setDefaults({...}) 来设置。