mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity
1832845716
element-plus/en-US/component/loading.html
ElementPlusBot 1832845716 website deploy
2022-04-29 14:50:25 +00:00

46 lines
39 KiB
HTML
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.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Loading | Element Plus</title>
<meta name="description" content="a Vue 3 based component library for designers and developers">
<link rel="stylesheet" href="/assets/style.c5dec7e2.css">
<link rel="modulepreload" href="/assets/chunks/fullscreen.899fb6be.js">
<link rel="modulepreload" href="/assets/app.01b76562.js">
<link rel="modulepreload" href="/assets/en-US_component_loading.md.7d0ec31d.lean.js">
<link rel="icon" href="/images/element-plus-logo-small.svg" type="image/svg+xm">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#409eff">
<meta name="msapplication-config" content="/browserconfig.xml">
<link rel="stylesheet" href="//fonts.loli.net/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap">
<link rel="stylesheet" href="//unpkg.com/nprogress@0.2.0/nprogress.css">
<script>window.supportedLangs=["en-US","zh-CN"];</script>
<script>(()=>{const o=window.supportedLangs,a="preferred_lang",s="en-US",c={en:"en-US",fr:"fr-FR",es:"es-ES"};let t=localStorage.getItem(a)||navigator.language;const n=c[t]||(o.includes(t)?t:s);if(localStorage.setItem(a,n),t=n,!location.pathname.startsWith(`/${t}`)){const e=[`/${t}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=e.endsWith(".html")||e.endsWith("/")?e:e.concat("/")}})();</script>
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
<script>(function(t,s,n,h,j,e){t.hj=t.hj||function(){(t.hj.q=t.hj.q||[]).push(arguments)},t._hjSettings={hjid:2894908,hjsv:6},j=s.getElementsByTagName("head")[0],e=s.createElement("script"),e.async=1,e.src=n+t._hjSettings.hjid+h+t._hjSettings.hjsv,j.appendChild(e)})(window,document,"https://static.hotjar.com/c/hotjar-",".js?sv=");</script>
<meta name="twitter:title" content="Loading | Element Plus">
<meta property="og:title" content="Loading | Element Plus">
</head>
<body>
<div id="app"><div class="App"><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-59a355b5><div class="header-container" data-v-59a355b5><div class="logo-container" data-v-59a355b5><a href="/en-US/" data-v-59a355b5><img class="logo" src="/images/element-plus-logo.svg" alt="Element Plus Logo" data-v-59a355b5></a></div><div class="content" data-v-59a355b5><div id="docsearch" class="algolia-search-box search" data-v-59a355b5></div><nav class="navbar-menu menu" data-v-59a355b5><!--[--><a class="link-item link is-menu-link" href="/en-US/guide/design" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Guide<!--]--><!--]--><!----></a><a class="link-item link is-menu-link active" href="/en-US/component/button" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Component<!--]--><!--]--><!----></a><a class="link-item link is-menu-link" href="/en-US/resource/index" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Resource<!--]--><!--]--><!----></a><!--]--></nav><!----><div class="translation-container translation" data-v-59a355b5 data-v-dd9c9540><!----></div><div class="social-links" data-v-59a355b5 data-v-76aa5200><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-76aa5200 data-v-6c8d2bba><i class="el-icon" style="font-size:24px;" data-v-6c8d2bba><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-6c8d2bba><path fill="currentColor" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path></svg><!--]--></i></a><!--]--></div><div class="menu-hamburger hamburger" role="button" data-v-59a355b5><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></div></div></div></div><!----></header><div class="sub-nav py-3 flex items-center"><div class="sidebar-button flex items-center"><i class="el-icon mr-2" style="font-size:20px;"><!--[--><svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="7" width="11" height="2" fill="#606266"></rect><rect x="2" y="11" width="14" height="2" fill="#606266"></rect><rect x="2" y="15" width="8" height="2" fill="#606266"></rect><rect x="2" y="3" width="16" height="2" fill="#606266"></rect></svg><!--]--></i><span class="leading-6">Menu</span></div><button ref_key="_ref" class="el-button el-button--text el-button--small height-5 go-back-top" type="button" style=""><!--v-if--><span class=""><!--[-->Back to top<!--]--></span></button></div><aside class="sidebar"><!--[--><div class="sponsors" data-v-b631cc3c><p class="sponsors-title" data-v-b631cc3c>Sponsored by</p><div class="sponsor-container" data-v-b631cc3c data-v-2d33bf36><!--[--><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="JNPF - JNPF 低代码开发平台，让开发变得简单！" class="sponsor-item inline-flex" style="" target="_blank" data-v-2d33bf36><img src="/images/jnpfsoft.jpg" alt="JNPF" data-v-2d33bf36></a><a href="https://vform666.com/vform3.html?from=element_plus" title="VForm - Vue 3 可视化/低代码表单" class="sponsor-item inline-flex" style="" target="_blank" data-v-2d33bf36><img src="/images/vform-banner.png" alt="VForm" data-v-2d33bf36></a><a href="https://js.design?source=element-plus" title="即时设计 - 专业在线UI设计工具" class="sponsor-item inline-flex" style="" target="_blank" data-v-2d33bf36><img src="/images/js-design-banner.jpg" alt="JSDesign" data-v-2d33bf36></a><!--]--></div><div class="sponsor-container" data-v-b631cc3c data-v-55fdef4a><!--[--><a class="sponsor-item inline-flex items-center" href="https://bit.dev/?from=element-ui" title="bit - Share Code" target="_blank" data-v-55fdef4a><img src="/images/bit.svg" alt="bit" data-v-55fdef4a></a><a class="sponsor-item inline-flex items-center" href="https://www.renren.io/?from=element-ui" title="人人开源 - 企业级的快速开发平台" target="_blank" data-v-55fdef4a><img src="/images/renren.png" alt="renren.io" data-v-55fdef4a></a><a class="sponsor-item inline-flex items-center" href="https://form.making.link/?from=element_plus" title="FormMaking - Vue表单设计器，赋能企业快速开发" target="_blank" data-v-55fdef4a><img src="/images/formmaking.png" alt="FormMaking" data-v-55fdef4a></a><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/en-US/component/button" data-v-76c5459a><p class="link-text" data-v-76c5459a>Button</p><!----></a><a class="link" href="/en-US/component/border" data-v-76c5459a><p class="link-text" data-v-76c5459a>Border</p><!----></a><a class="link" href="/en-US/component/color" data-v-76c5459a><p class="link-text" data-v-76c5459a>Color</p><!----></a><a class="link" href="/en-US/component/container" data-v-76c5459a><p class="link-text" data-v-76c5459a>Layout Container</p><!----></a><a class="link" href="/en-US/component/icon" data-v-76c5459a><p class="link-text" data-v-76c5459a>Icon</p><!----></a><a class="link" href="/en-US/component/layout" data-v-76c5459a><p class="link-text" data-v-76c5459a>Layout</p><!----></a><a class="link" href="/en-US/component/link" data-v-76c5459a><p class="link-text" data-v-76c5459a>Link</p><!----></a><a class="link" href="/en-US/component/scrollbar" data-v-76c5459a><p class="link-text" data-v-76c5459a>Scrollbar</p><!----></a><a class="link" href="/en-US/component/space" data-v-76c5459a><p class="link-text" data-v-76c5459a>Space</p><!----></a><a class="link" href="/en-US/component/typography" data-v-76c5459a><p class="link-text" data-v-76c5459a>Typography</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/en-US/component/config-provider" data-v-76c5459a><p class="link-text" data-v-76c5459a>Config Provider</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/en-US/component/cascader" data-v-76c5459a><p class="link-text" data-v-76c5459a>Cascader</p><!----></a><a class="link" href="/en-US/component/checkbox" data-v-76c5459a><p class="link-text" data-v-76c5459a>Checkbox</p><!----></a><a class="link" href="/en-US/component/color-picker" data-v-76c5459a><p class="link-text" data-v-76c5459a>Color Picker</p><!----></a><a class="link" href="/en-US/component/date-picker" data-v-76c5459a><p class="link-text" data-v-76c5459a>Date Picker</p><!----></a><a class="link" href="/en-US/component/datetime-picker" data-v-76c5459a><p class="link-text" data-v-76c5459a>DateTime Picker</p><!----></a><a class="link" href="/en-US/component/form" data-v-76c5459a><p class="link-text" data-v-76c5459a>Form</p><!----></a><a class="link" href="/en-US/component/input" data-v-76c5459a><p class="link-text" data-v-76c5459a>Input</p><!----></a><a class="link" href="/en-US/component/input-number" data-v-76c5459a><p class="link-text" data-v-76c5459a>Input Number</p><!----></a><a class="link" href="/en-US/component/radio" data-v-76c5459a><p class="link-text" data-v-76c5459a>Radio</p><!----></a><a class="link" href="/en-US/component/rate" data-v-76c5459a><p class="link-text" data-v-76c5459a>Rate</p><!----></a><a class="link" href="/en-US/component/select" data-v-76c5459a><p class="link-text" data-v-76c5459a>Select</p><!----></a><a class="link" href="/en-US/component/select-v2" data-v-76c5459a><p class="link-text" data-v-76c5459a>Virtualized Select</p><!----></a><a class="link" href="/en-US/component/slider" data-v-76c5459a><p class="link-text" data-v-76c5459a>Slider</p><!----></a><a class="link" href="/en-US/component/switch" data-v-76c5459a><p class="link-text" data-v-76c5459a>Switch</p><!----></a><a class="link" href="/en-US/component/time-picker" data-v-76c5459a><p class="link-text" data-v-76c5459a>Time Picker</p><!----></a><a class="link" href="/en-US/component/time-select" data-v-76c5459a><p class="link-text" data-v-76c5459a>Time Select</p><!----></a><a class="link" href="/en-US/component/transfer" data-v-76c5459a><p class="link-text" data-v-76c5459a>Transfer</p><!----></a><a class="link" href="/en-US/component/upload" data-v-76c5459a><p class="link-text" data-v-76c5459a>Upload</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/en-US/component/avatar" data-v-76c5459a><p class="link-text" data-v-76c5459a>Avatar</p><!----></a><a class="link" href="/en-US/component/badge" data-v-76c5459a><p class="link-text" data-v-76c5459a>Badge</p><!----></a><a class="link" href="/en-US/component/calendar" data-v-76c5459a><p class="link-text" data-v-76c5459a>Calendar</p><!----></a><a class="link" href="/en-US/component/card" data-v-76c5459a><p class="link-text" data-v-76c5459a>Card</p><!----></a><a class="link" href="/en-US/component/carousel" data-v-76c5459a><p class="link-text" data-v-76c5459a>Carousel</p><!----></a><a class="link" href="/en-US/component/collapse" data-v-76c5459a><p class="link-text" data-v-76c5459a>Collapse</p><!----></a><a class="link" href="/en-US/component/descriptions" data-v-76c5459a><p class="link-text" data-v-76c5459a>Descriptions</p><!----></a><a class="link" href="/en-US/component/empty" data-v-76c5459a><p class="link-text" data-v-76c5459a>Empty</p><!----></a><a class="link" href="/en-US/component/image" data-v-76c5459a><p class="link-text" data-v-76c5459a>Image</p><!----></a><a class="link" href="/en-US/component/infinite-scroll" data-v-76c5459a><p class="link-text" data-v-76c5459a>Infinite Scroll</p><!----></a><a class="link" href="/en-US/component/pagination" data-v-76c5459a><p class="link-text" data-v-76c5459a>Pagination</p><!----></a><a class="link" href="/en-US/component/progress" data-v-76c5459a><p class="link-text" data-v-76c5459a>Progress</p><!----></a><a class="link" href="/en-US/component/result" data-v-76c5459a><p class="link-text" data-v-76c5459a>Result</p><!----></a><a class="link" href="/en-US/component/skeleton" data-v-76c5459a><p class="link-text" data-v-76c5459a>Skeleton</p><!----></a><a class="link" href="/en-US/component/table" data-v-76c5459a><p class="link-text" data-v-76c5459a>Table</p><!----></a><a class="link" href="/en-US/component/tag" data-v-76c5459a><p class="link-text" data-v-76c5459a>Tag</p><!----></a><a class="link" href="/en-US/component/timeline" data-v-76c5459a><p class="link-text" data-v-76c5459a>Timeline</p><!----></a><a class="link" href="/en-US/component/tree" data-v-76c5459a><p class="link-text" data-v-76c5459a>Tree</p><!----></a><a class="link flex items-center" href="/en-US/component/tree-select" data-v-76c5459a><p class="link-text" data-v-76c5459a>TreeSelect</p><span class="el-tag el-tag--small el-tag--plain is-hit ml-2" style="background-color:;border-radius:9999px;" data-v-76c5459a><span class="el-tag__content"><!--[-->2.1.8<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tree-v2" data-v-76c5459a><p class="link-text" data-v-76c5459a>Virtualized Tree</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/en-US/component/affix" data-v-76c5459a><p class="link-text" data-v-76c5459a>Affix</p><!----></a><a class="link" href="/en-US/component/backtop" data-v-76c5459a><p class="link-text" data-v-76c5459a>Backtop</p><!----></a><a class="link" href="/en-US/component/breadcrumb" data-v-76c5459a><p class="link-text" data-v-76c5459a>Breadcrumb</p><!----></a><a class="link" href="/en-US/component/dropdown" data-v-76c5459a><p class="link-text" data-v-76c5459a>Dropdown</p><!----></a><a class="link" href="/en-US/component/menu" data-v-76c5459a><p class="link-text" data-v-76c5459a>Menu</p><!----></a><a class="link" href="/en-US/component/page-header" data-v-76c5459a><p class="link-text" data-v-76c5459a>Page Header</p><!----></a><a class="link" href="/en-US/component/steps" data-v-76c5459a><p class="link-text" data-v-76c5459a>Steps</p><!----></a><a class="link" href="/en-US/component/tabs" data-v-76c5459a><p class="link-text" data-v-76c5459a>Tabs</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link" href="/en-US/component/alert" data-v-76c5459a><p class="link-text" data-v-76c5459a>Alert</p><!----></a><a class="link" href="/en-US/component/dialog" data-v-76c5459a><p class="link-text" data-v-76c5459a>Dialog</p><!----></a><a class="link" href="/en-US/component/drawer" data-v-76c5459a><p class="link-text" data-v-76c5459a>Drawer</p><!----></a><a class="link active" href="/en-US/component/loading" data-v-76c5459a><p class="link-text" data-v-76c5459a>Loading</p><!----></a><a class="link" href="/en-US/component/message" data-v-76c5459a><p class="link-text" data-v-76c5459a>Message</p><!----></a><a class="link" href="/en-US/component/message-box" data-v-76c5459a><p class="link-text" data-v-76c5459a>Message Box</p><!----></a><a class="link" href="/en-US/component/notification" data-v-76c5459a><p class="link-text" data-v-76c5459a>Notification</p><!----></a><a class="link" href="/en-US/component/popconfirm" data-v-76c5459a><p class="link-text" data-v-76c5459a>Pop Confirm</p><!----></a><a class="link" href="/en-US/component/popover" data-v-76c5459a><p class="link-text" data-v-76c5459a>Popover</p><!----></a><a class="link" href="/en-US/component/tooltip" data-v-76c5459a><p class="link-text" data-v-76c5459a>Tooltip</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/en-US/component/divider" data-v-76c5459a><p class="link-text" data-v-76c5459a>Divider</p><!----></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><main class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="loading" tabindex="-1">Loading <a class="header-anchor" href="#loading" aria-hidden="true">#</a></h1><p>Show animation while loading data.</p><h2 id="loading-inside-a-container" tabindex="-1">Loading inside a container <a class="header-anchor" href="#loading-inside-a-container" aria-hidden="true">#</a></h2><p>Displays animation in a container (such as a table) while loading data.</p><!----><h2 id="customization" tabindex="-1">Customization <a class="header-anchor" href="#customization" aria-hidden="true">#</a></h2><p>You can customize loading text, loading spinner and background color.</p><!----><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Although the <code>element-loading-spinner / element-loading-svg</code> attribute supports incoming HTML fragments, it is very dangerous to dynamically render arbitrary HTML on the website, because it is easy to cause <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank" rel="noopener noreferrer">XSS attack</a>. Please make sure that the content of <code>element-loading-spinner / element-loading-svg</code> is trustworthy. <strong>Never</strong> assign user-submitted content to the <code>element-loading-spinner / element-loading-svg</code> attribute.</p></div><h2 id="full-screen-loading" tabindex="-1">Full screen loading <a class="header-anchor" href="#full-screen-loading" aria-hidden="true">#</a></h2><p>Show a full screen animation while loading data.</p><!----><h2 id="service" tabindex="-1">Service <a class="header-anchor" href="#service" aria-hidden="true">#</a></h2><p>You can also invoke Loading with a service. Import Loading service:</p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ElLoading <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;element-plus&#39;</span>
</code></pre></div><p>Invoke it:</p><div class="language-ts"><pre><code>ElLoading<span class="token punctuation">.</span><span class="token function">service</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
</code></pre></div><p>The parameter <code>options</code> is the configuration of Loading, and its details can be found in the following table. <code>LoadingService</code> returns a Loading instance, and you can close it by invoking its <code>close</code> method:</p><div class="language-ts"><pre><code><span class="token keyword">const</span> loadingInstance <span class="token operator">=</span> ElLoading<span class="token punctuation">.</span><span class="token function">service</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
<span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment">// Loading should be closed asynchronously</span>
loadingInstance<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:</p><div class="language-ts"><pre><code><span class="token keyword">const</span> loadingInstance1 <span class="token operator">=</span> ElLoading<span class="token punctuation">.</span><span class="token function">service</span><span class="token punctuation">(</span><span class="token punctuation">{</span> fullscreen<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> loadingInstance2 <span class="token operator">=</span> ElLoading<span class="token punctuation">.</span><span class="token function">service</span><span class="token punctuation">(</span><span class="token punctuation">{</span> fullscreen<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>loadingInstance1 <span class="token operator">===</span> loadingInstance2<span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><p>Calling the <code>close</code> method on any one of them can close this full screen Loading.</p><p>If Element Plus is imported entirely, a globally method <code>$loading</code> will be registered to <code>app.config.globalProperties</code>. You can invoke it like this: <code>this.$loading(options)</code>, and it also returns a Loading instance.</p><h2 id="options" tabindex="-1">Options <a class="header-anchor" href="#options" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>target</td><td>the DOM node Loading needs to cover. Accepts a DOM object or a string. If it&#39;s a string, it will be passed to <code>document.querySelector</code> to get the corresponding DOM node</td><td>object/string</td><td>—</td><td>document.body</td></tr><tr><td>body</td><td>same as the <code>body</code> modifier of <code>v-loading</code></td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>fullscreen</td><td>same as the <code>fullscreen</code> modifier of <code>v-loading</code></td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>lock</td><td>same as the <code>lock</code> modifier of <code>v-loading</code></td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>text</td><td>loading text that displays under the spinner</td><td>string</td><td>—</td><td>—</td></tr><tr><td>spinner</td><td>class name of the custom spinner</td><td>string</td><td>—</td><td>—</td></tr><tr><td>background</td><td>background color of the mask</td><td>string</td><td>—</td><td>—</td></tr><tr><td>custom-class</td><td>custom class name for Loading</td><td>string</td><td>—</td><td>—</td></tr></tbody></table><h2 id="directives" tabindex="-1">Directives <a class="header-anchor" href="#directives" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>v-loading</td><td>show animation while loading data</td><td>boolean</td></tr><tr><td>element-loading-text</td><td>loading text that displays under the spinner</td><td>string</td></tr><tr><td>element-loading-spinner</td><td>icon of the custom spinner</td><td>string</td></tr><tr><td>element-loading-svg</td><td>icon of the custom spinner (same as element-loading-spinner)</td><td>string</td></tr><tr><td>element-loading-background</td><td>background color of the mask</td><td>string</td></tr></tbody></table><h2 id="source" tabindex="-1">Source <a class="header-anchor" href="#source" aria-hidden="true">#</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/loading" target="_blank" rel="noopener noreferrer">Component</a> • <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/loading.md" target="_blank" rel="noopener noreferrer">Docs</a></p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-hidden="true">#</a></h2><div class="mb-4" data-v-78931949><div class="flex flex-wrap gap-4 pt-2" data-v-78931949><!--[--><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/sxzz" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6481596?v=4" class="w-8 h-8 rounded-full" data-v-78931949> 三咲智子<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/JeremyWuuuuu" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/15975785?v=4" class="w-8 h-8 rounded-full" data-v-78931949> jeremywu<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/YunYouJun" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/25154432?v=4" class="w-8 h-8 rounded-full" data-v-78931949> 云游君<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/adaex" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/29560987?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Aex<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/purepear" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/144010?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Delyan Haralanov<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/zcmk123" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/20919760?v=4" class="w-8 h-8 rounded-full" data-v-78931949> DoubleBird<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/BigPengZai" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/18347659?v=4" class="w-8 h-8 rounded-full" data-v-78931949> BigPengZai<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/anguiao" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/16174159?v=4" class="w-8 h-8 rounded-full" data-v-78931949> anguiao<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/BiosSun" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/2755933?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Bios Sun<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/Chris-Kin" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/10802869?v=4" class="w-8 h-8 rounded-full" data-v-78931949> on the field of hope<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/Ryan2128" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/33176053?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Ryan2128<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/Hades-li" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/12124478?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Hades-li<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/emojiiii" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30518686?v=4" class="w-8 h-8 rounded-full" data-v-78931949> C.Y.Kun<!--]--><!----></a></div><!--]--></div></div></div></div><footer class="page-footer" data-v-3e2f3e7f><div class="edit" data-v-3e2f3e7f><div class="edit-link" data-v-3e2f3e7f data-v-7d4aa2c8><a class="link text-sm" href="https://github.com/element-plus/element-plus/edit/dev/docs/en-US/component/loading.md" target="_blank" rel="noopener noreferrer" data-v-7d4aa2c8>Edit this page on GitHub <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-7d4aa2c8><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-7d4aa2c8><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg><!--]--></i></a></div></div></footer><div class="next-and-prev-link" data-v-8ad25866><div class="container" data-v-8ad25866><div class="prev" data-v-8ad25866><a class="link" href="/en-US/component/drawer" data-v-8ad25866><i class="el-icon mr-1" style="" data-v-8ad25866><!--[--><svg viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-8ad25866><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-8ad25866>Drawer</span></a></div><div class="next" data-v-8ad25866><a class="link" href="/en-US/component/message" data-v-8ad25866><span class="text" data-v-8ad25866>Message</span><i class="el-icon ml-1" style="" data-v-8ad25866><!--[--><svg viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-8ad25866><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside ref_key="container" class="toc-wrapper"><nav class="toc-content"><h3 class="toc-content__heading">Contents</h3><ul class="toc-items"><!--[--><li class="toc-item"><a class="toc-link" href="#loading-inside-a-container" title="Loading inside a container">Loading inside a container</a><!----></li><li class="toc-item"><a class="toc-link" href="#customization" title="Customization">Customization</a><!----></li><li class="toc-item"><a class="toc-link" href="#full-screen-loading" title="Full screen loading">Full screen loading</a><!----></li><li class="toc-item"><a class="toc-link" href="#service" title="Service">Service</a><!----></li><li class="toc-item"><a class="toc-link" href="#options" title="Options">Options</a><!----></li><li class="toc-item"><a class="toc-link" href="#directives" title="Directives">Directives</a><!----></li><li class="toc-item"><a class="toc-link" href="#source" title="Source">Source</a><!----></li><li class="toc-item"><a class="toc-link" href="#contributors" title="Contributors">Contributors</a><!----></li><!--]--></ul><div class="toc-marker"></div><div class="join mt-4"><!--[--><a href="mailto:element-plus@outlook.com" target="_blank" class="el-tooltip__trigger"><button ref_key="_ref" class="el-button" type="button" style=""><!--v-if--><span class=""><!--[-->Become a Sponsor!<!--]--></span></button></a><!--teleport start--><!--teleport end--><!--]--></div></nav></aside></div></main><!----><!----></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"ea6059f1\",\"en-us_component_alert.md\":\"72db2e91\",\"en-us_component_avatar.md\":\"f025ddde\",\"en-us_component_backtop.md\":\"04718d5a\",\"en-us_component_badge.md\":\"9450d83e\",\"en-us_component_border.md\":\"2a90a77e\",\"en-us_component_breadcrumb.md\":\"538a0f0b\",\"en-us_component_button.md\":\"731a882c\",\"en-us_component_calendar.md\":\"1f025549\",\"en-us_component_card.md\":\"8a8c015c\",\"en-us_component_carousel.md\":\"fd524170\",\"en-us_component_cascader.md\":\"28d6ab33\",\"en-us_component_checkbox.md\":\"bb774ada\",\"en-us_component_collapse.md\":\"2c8eedfa\",\"en-us_component_color-picker.md\":\"cd283657\",\"en-us_component_color.md\":\"c536f6e5\",\"en-us_component_config-provider.md\":\"0fb6fd1c\",\"en-us_component_container.md\":\"bb510494\",\"en-us_component_date-picker.md\":\"f76e660b\",\"en-us_component_datetime-picker.md\":\"ed21373b\",\"en-us_component_descriptions.md\":\"3dc06f08\",\"en-us_component_dialog.md\":\"d69cc7ef\",\"en-us_component_divider.md\":\"c9da5810\",\"en-us_component_drawer.md\":\"5df4e4eb\",\"en-us_component_dropdown.md\":\"b12054d8\",\"en-us_component_empty.md\":\"571fca34\",\"en-us_component_form.md\":\"e9c76ea9\",\"en-us_component_icon.md\":\"b34f4ca0\",\"en-us_component_image.md\":\"76389f74\",\"en-us_component_infinite-scroll.md\":\"056115dd\",\"en-us_component_input-number.md\":\"bf2a6d2e\",\"en-us_component_input.md\":\"21f32b0f\",\"en-us_component_layout.md\":\"308376c2\",\"en-us_component_link.md\":\"f519ac09\",\"en-us_component_loading.md\":\"7d0ec31d\",\"en-us_component_menu.md\":\"ceb031c8\",\"en-us_component_message-box.md\":\"3c1f2003\",\"en-us_component_message.md\":\"5dfaafa2\",\"en-us_component_notification.md\":\"e2f972d1\",\"en-us_component_page-header.md\":\"e7e341f1\",\"en-us_component_pagination.md\":\"846b329f\",\"en-us_component_popconfirm.md\":\"d791607c\",\"en-us_component_popover.md\":\"c26987e5\",\"en-us_component_progress.md\":\"3c3ed8ba\",\"en-us_component_radio.md\":\"29679385\",\"en-us_component_rate.md\":\"0c59e5b1\",\"en-us_component_result.md\":\"5b10a0db\",\"en-us_component_scrollbar.md\":\"fb3b3b94\",\"en-us_component_select-v2.md\":\"7f6e94df\",\"en-us_component_select.md\":\"792e3eff\",\"en-us_component_skeleton.md\":\"ff800012\",\"en-us_component_slider.md\":\"99471891\",\"en-us_component_space.md\":\"222f869c\",\"en-us_component_steps.md\":\"4c27d747\",\"en-us_component_switch.md\":\"506356e0\",\"en-us_component_table-v2.md\":\"91694532\",\"en-us_component_table.md\":\"1c41a7eb\",\"en-us_component_tabs.md\":\"25ff2574\",\"en-us_component_tag.md\":\"8dd2488a\",\"en-us_component_time-picker.md\":\"c832df6e\",\"en-us_component_time-select.md\":\"99732e04\",\"en-us_component_timeline.md\":\"4ba34ed5\",\"en-us_component_tooltip-v2.md\":\"96a949cc\",\"en-us_component_tooltip.md\":\"3f78cc48\",\"en-us_component_transfer.md\":\"4de554e2\",\"en-us_component_tree-select.md\":\"84a641c4\",\"en-us_component_tree-v2.md\":\"7a57ce8b\",\"en-us_component_tree.md\":\"ca3dfae1\",\"en-us_component_typography.md\":\"50f4b42f\",\"en-us_component_upload.md\":\"477fe0ce\",\"en-us_guide_changelog.md\":\"62398022\",\"en-us_guide_design.md\":\"99dc0940\",\"en-us_guide_i18n.md\":\"933a68b9\",\"en-us_guide_installation.md\":\"f88fb2f0\",\"en-us_guide_migration.md\":\"aca68a43\",\"en-us_guide_nav.md\":\"495f89cc\",\"en-us_guide_quickstart.md\":\"62b0e41d\",\"en-us_guide_theming.md\":\"b93daf45\",\"en-us_guide_transitions.md\":\"f3545567\",\"en-us_index.md\":\"39e4f919\",\"en-us_resource_index.md\":\"006eaff8\",\"index.md\":\"c7113b08\",\"zh-cn_component_affix.md\":\"c5efb387\",\"zh-cn_component_alert.md\":\"8b4ebb8f\",\"zh-cn_component_avatar.md\":\"cbaabcd4\",\"zh-cn_component_backtop.md\":\"d2d16d79\",\"zh-cn_component_badge.md\":\"8cba48d5\",\"zh-cn_component_border.md\":\"676ce25d\",\"zh-cn_component_breadcrumb.md\":\"4027228f\",\"zh-cn_component_button.md\":\"96d421fb\",\"zh-cn_component_calendar.md\":\"6ba13564\",\"zh-cn_component_card.md\":\"d0ef3f80\",\"zh-cn_component_carousel.md\":\"693d5474\",\"zh-cn_component_cascader.md\":\"b795af30\",\"zh-cn_component_checkbox.md\":\"8e32bcfa\",\"zh-cn_component_collapse.md\":\"1baf4892\",\"zh-cn_component_color-picker.md\":\"6c4f2e58\",\"zh-cn_component_color.md\":\"72dedd00\",\"zh-cn_component_config-provider.md\":\"97699832\",\"zh-cn_component_container.md\":\"489cf9bd\",\"zh-cn_component_date-picker.md\":\"df44aa36\",\"zh-cn_component_datetime-picker.md\":\"4ca2227d\",\"zh-cn_component_descriptions.md\":\"464fccd9\",\"zh-cn_component_dialog.md\":\"077da318\",\"zh-cn_component_divider.md\":\"0b914358\",\"zh-cn_component_drawer.md\":\"59bc97f5\",\"zh-cn_component_dropdown.md\":\"e747b80d\",\"zh-cn_component_empty.md\":\"b53e8d59\",\"zh-cn_component_form.md\":\"eb43413b\",\"zh-cn_component_icon.md\":\"405ba262\",\"zh-cn_component_image.md\":\"e60fa4e2\",\"zh-cn_component_infinite-scroll.md\":\"6f9b10b9\",\"zh-cn_component_input-number.md\":\"537e9e8e\",\"zh-cn_component_input.md\":\"99600a14\",\"zh-cn_component_layout.md\":\"b51ea051\",\"zh-cn_component_link.md\":\"6759eca7\",\"zh-cn_component_loading.md\":\"6674c94b\",\"zh-cn_component_menu.md\":\"577969b4\",\"zh-cn_component_message-box.md\":\"f46e97d5\",\"zh-cn_component_message.md\":\"b593efdb\",\"zh-cn_component_notification.md\":\"6311a709\",\"zh-cn_component_page-header.md\":\"e53b0464\",\"zh-cn_component_pagination.md\":\"398b45d4\",\"zh-cn_component_popconfirm.md\":\"5e8eae33\",\"zh-cn_component_popover.md\":\"ecfb39c3\",\"zh-cn_component_progress.md\":\"830ce3d3\",\"zh-cn_component_radio.md\":\"249f3da4\",\"zh-cn_component_rate.md\":\"7628868c\",\"zh-cn_component_result.md\":\"d868e935\",\"zh-cn_component_scrollbar.md\":\"3630ef10\",\"zh-cn_component_select-v2.md\":\"b7d48fa5\",\"zh-cn_component_select.md\":\"17368472\",\"zh-cn_component_skeleton.md\":\"cd67a41d\",\"zh-cn_component_slider.md\":\"29c13fbe\",\"zh-cn_component_space.md\":\"e20d49ab\",\"zh-cn_component_steps.md\":\"16a6ae08\",\"zh-cn_component_switch.md\":\"315319d9\",\"zh-cn_component_table-v2.md\":\"947cf985\",\"zh-cn_component_table.md\":\"0bd5cd6f\",\"zh-cn_component_tabs.md\":\"3f70b604\",\"zh-cn_component_tag.md\":\"77d8091b\",\"zh-cn_component_time-picker.md\":\"8de367a7\",\"zh-cn_component_time-select.md\":\"2f3ebdf4\",\"zh-cn_component_timeline.md\":\"adeb6d1c\",\"zh-cn_component_tooltip-v2.md\":\"88c623f1\",\"zh-cn_component_tooltip.md\":\"3ca2eb13\",\"zh-cn_component_transfer.md\":\"58c6fa0d\",\"zh-cn_component_tree-select.md\":\"c4f233ac\",\"zh-cn_component_tree-v2.md\":\"fddd218b\",\"zh-cn_component_tree.md\":\"b383d9f0\",\"zh-cn_component_typography.md\":\"8d057c34\",\"zh-cn_component_upload.md\":\"ace7242e\",\"zh-cn_guide_changelog.md\":\"efcb66a3\",\"zh-cn_guide_design.md\":\"e5346f6c\",\"zh-cn_guide_i18n.md\":\"3a2383b2\",\"zh-cn_guide_installation.md\":\"3f05bef7\",\"zh-cn_guide_migration.md\":\"f27f1d0e\",\"zh-cn_guide_nav.md\":\"7b48b47a\",\"zh-cn_guide_quickstart.md\":\"36e8905c\",\"zh-cn_guide_theming.md\":\"bf7ba367\",\"zh-cn_guide_transitions.md\":\"0a8c3e44\",\"zh-cn_index.md\":\"53f7b576\",\"zh-cn_resource_index.md\":\"fa5f65a3\"}")</script>
<script type="module" async src="/assets/app.01b76562.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink