</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><divclass="language-ts"><pre><code><spanclass="token keyword">const</span> loadingInstance <spanclass="token operator">=</span> ElLoading<spanclass="token punctuation">.</span><spanclass="token function">service</span><spanclass="token punctuation">(</span>options<spanclass="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><divclass="language-ts"><pre><code><spanclass="token keyword">const</span> loadingInstance1 <spanclass="token operator">=</span> ElLoading<spanclass="token punctuation">.</span><spanclass="token function">service</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span> fullscreen<spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</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><h2id="options"tabindex="-1">Options <aclass="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'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><h2id="directives"tabindex="-1">Directives <aclass="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><h2id="source"tabindex="-1">Source <aclass="header-anchor"href="#source"aria-hidden="true">#</a></h2><p><ahref="https://github.com/element-plus/element-plus/tree/dev/packages/components/loading"target="_blank"rel="noopener noreferrer">Component</a> • <ahref="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/loading.md"target="_blank"rel="noopener noreferrer">Docs</a></p><h2id="contributors"tabindex="-1">Contributors <aclass="header-anchor"href="#contributors"aria-hidden="true">#</a></h2><divclass="mb-4"data-v-78931949><divclass="flex flex-wrap gap-4 pt-2"data-v-78931949><!--[--><divdata-v-78931949><aclass="link-item link flex gap-2 items-center link"href="https://github.com/sxzz"target="_blank"rel="noopener noreferrer"data-v-78931949data-v-36735cb0><!--[--><imgsrc="https://avatars.githubusercontent.com/u/6481596?v=4"class="w-8 h-8 rounded-full"data-v-78931949> 三咲智子<!--]--><!----></a></div><divdata-v-78931949><aclass="link-item link flex gap-2 items-center link"href="https://github.com/JeremyWuuuuu"target="_blank"rel="noopener noreferrer"data-v-78931949data-v-36735cb0><!--[--><imgsrc="https://avatars.githubusercontent.com/u/15975785?v=4"class="w-8 h-8 rounded-full"data-v-78931949> jeremywu<!--]--><!----></a></div><divdata-v-78931949><aclass="link-item link flex gap-2 items-center link"href="https://github.com/YunYouJun"target="_blank"rel="noopener noreferrer"data-v-78931949data-v-36735cb0><!--[--><imgsrc="https://avatars.githubusercontent.com/u/25154432?v=4"class="w-8 h-8 rounded-full"data-v-78931949> 云游君<!--]-->