Global Loading
Global loading refers to the loading effect that appears when the page is refreshed, usually a spinning icon:
Principle
Implemented by the vite-plugin-inject-app-loading plugin, the plugin injects a global loading html into each application.
Disable
If you do not need global loading, you can disable it in the .env file:
bash
VITE_INJECT_APP_LOADING=falseCustomization
If you want to customize the global loading, you can create a loading.html file in the application directory, at the same level as index.html. The plugin will automatically read and inject this HTML. You can define the style and animation of this HTML as you wish.
TIP
- You can use the same syntax as in
index.html, such as theVITE_APP_TITLEvariable, to get the application's title. - You must ensure there is an element with
id="__app-loading__". - Add a
hiddenclass to the element withid="__app-loading__". - You must ensure there is a
style[data-app-loading="inject-css"]element.
html
<style data-app-loading="inject-css">
#__app-loading__.hidden {
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
}
/* ... */
</style>
<div id="__app-loading__">
<!-- ... -->
<div class="title"><%= VITE_APP_TITLE %></div>
</div>Contributors
invalid w
Li Kui