admin-vben5/docs/src/guide/in-depth/loading.md
Vben b6415fad2d
perf: optimize for some details and comments (#4030)
* perf: optimize for some details and comments

* fix: test case

* chore: update ci
2024-08-04 05:42:59 +08:00

38 lines
1.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 全局loading
全局 loading 指的是页面刷新时出现的加载效果,通常是一个旋转的图标:
![](/guide/loading.png)
## 原理
`vite-plugin-inject-app-loading` 插件实现,插件会在每个应用的注入一个全局的 `loading html`
## 关闭
如果你不需要全局 loading可以在 `.env` 文件中关闭:
```bash
VITE_INJECT_APP_LOADING=false
```
## 自定义
如果你想要自定义全局 loading可以在应用目录下与`index.html`同级,创建一个`loading.html`文件插件会自动读取并注入。这个html可以自行定义样式和动画。
::: tip
- 你可以使用跟`index.html`一样的语法,比如`VITE_APP_TITLE`变量,来获取应用的标题。
- 必须保证有一个`id="__app-loading__"`的元素。
- 必须保证有一个`style[data-app-loading="inject-css"]`的元素。
```html{1,4}
<style data-app-loading="inject-css">
/* ... */
</style>
<div id="__app-loading__">
<!-- ... -->
<div class="title"><%= VITE_APP_TITLE %></div>
</div>
```