import{_ as p,M as c,p as i,q as l,Q as n,t as s,N as t,V as e,a1 as o}from"./framework-2d0bbdc3.js";const d={},u=n("h1",{id:"use",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#use","aria-hidden":"true"},"#"),s(" use")],-1),r=o(`<h2 id="webloading" tabindex="-1"><a class="header-anchor" href="#webloading" aria-hidden="true">#</a> <code>WebLoading</code></h2><blockquote><p>Whether it is <code>DOM</code>, <code>FULL </code>or <code>MINI </code>, it will eventually go to <code>WebLoading</code>.</p></blockquote><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> initLoading <span class="token keyword">from</span> <span class="token string">&#39;web-loading/src/loading&#39;</span>
<span class="token keyword">let</span> webLoading <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</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>webLoading<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p><code>webLoading</code>：<code>loading</code>、<code>resize</code>、<code>close</code>、<code>update</code>、<code>getOptions</code>、<code>getLoadingId</code>。</p></blockquote><h3 id="loading" tabindex="-1"><a class="header-anchor" href="#loading" aria-hidden="true">#</a> loading</h3><blockquote><p>Start the animation<code>loading</code>。</p></blockquote><ul><li><p>Parameters:</p><ul><li><code>dom:HTMLElement</code></li><li><code>options?:OptionsType</code></li></ul></li><li><p>Return: void</p></li></ul><blockquote><p>When the <code>loading</code> function is called, it will first check whether the <code>loadingId</code> exists (whether it is still being drawn). Only when there is no drawing status can it be started.</p><p>The <code>loading</code> parameter 2 can override the <code>options</code> of the initialization <code>initLoading </code>.</p></blockquote><h3 id="resize" tabindex="-1"><a class="header-anchor" href="#resize" aria-hidden="true">#</a> resize</h3><blockquote><p>Recalculate and draw the <code>loading</code> size.</p></blockquote><ul><li>Parameter: None</li><li>Return: void</li></ul><blockquote><p><code>Resize</code>will retrieve the size and redraw from the bound<code>HtmlElement</code>. This function will not re-instance<code>WebLoading</code>and<code>loading</code>business scenarios. For example,<code> window. addEventListener (</code>resize<code>, loading. resize) </code>may be used.</p></blockquote><h3 id="close" tabindex="-1"><a class="header-anchor" href="#close" aria-hidden="true">#</a> close</h3><blockquote><p>close<code>loading。</code></p></blockquote><ul><li>Parameter: None</li><li>Return: void</li></ul><blockquote><p><code>close</code> will first clear all <code>stores</code> and other records of<code>WebLoading</code>, and stop the<code>requestAnimationFrame</code>call, and finally clear the relevant elements according to<code>delayColse</code>. During the closing process,<code>WebLoading</code>will use<code>hookCall</code>to trigger the<code>hook</code>to close <strong>hook function</strong> (<code>BEFORE _COLSE</code>: before closing,<code>COLSED</code>: after closing, that is, after clearing the elements) to facilitate the drawing of <strong>model</strong>.</p></blockquote><h3 id="update" tabindex="-1"><a class="header-anchor" href="#update" aria-hidden="true">#</a> update</h3><blockquote><p>Draw <code>model</code> dynamically. <a href="#Public">Public Configuration</a> cannot be modified dynamically.</p></blockquote><ul><li>Parameter: <ul><li><code>options?:OptionsType</code></li></ul></li><li>Return:void</li></ul><blockquote><p>The update function does not re-instance <code>WebLoading</code>, and re-draws<code>model</code>through the parameter<code> options</code>. The business scenario is similar to <code>loading</code>, but <code>loading</code> initializes<code>WebLoading</code>every time. Only when it is closed can the corresponding business be implemented. Therefore,<code>update</code>is recommended in the dynamic rendering<code>model</code>business scenario.</p></blockquote><h3 id="getoptions" tabindex="-1"><a class="header-anchor" href="#getoptions" aria-hidden="true">#</a> getOptions</h3><blockquote><p>Get the current options configuration.</p></blockquote><ul><li><p>Parameter: None</p></li><li><p>Return:</p><ul><li><code>options:OptionsType</code></li></ul></li></ul><h3 id="getloadingid" tabindex="-1"><a class="header-anchor" href="#getloadingid" aria-hidden="true">#</a> getLoadingId</h3><blockquote><p>obtain <code>loadingId</code>。</p></blockquote><ul><li><p>Parameter: None</p></li><li><p>Return:</p><ul><li><code>loadingId:string | null</code></li></ul></li></ul><blockquote><p>The <code>loadingId </code>will be assigned a value after initialization, and will be assigned a value of<code>null</code>after<code>close</code>is closed. Therefore, if<code>loadingId</code>is<code> null</code>, there is currently no drawing status, otherwise the opposite is true.</p></blockquote><h2 id="options" tabindex="-1"><a class="header-anchor" href="#options" aria-hidden="true">#</a> options</h2><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">MODEL_TYPES</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/utils&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> initLoading <span class="token keyword">from</span> <span class="token string">&#39;web-loading/src/loading&#39;</span>
<span class="token keyword">let</span> webLoading <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    model<span class="token operator">:</span><span class="token constant">MODEL_TYPES</span><span class="token punctuation">.</span><span class="token constant">GEAR</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="public" tabindex="-1"><a class="header-anchor" href="#public" aria-hidden="true">#</a> Public</h3><table><thead><tr><th>attribute</th><th>type</th><th>default</th><th>remarks</th></tr></thead><tbody><tr><td><code>html?:</code></td><td><code>string</code></td><td><code>&#39;&#39;</code></td><td>**Html ** loading method (<strong>priority is higher than custom</strong>)</td></tr><tr><td><code>custom?:</code></td><td><code>typeof BaseModel or null</code></td><td><code>null</code></td><td>Custom <strong>model</strong> (<strong>has the highest priority</strong>)</td></tr><tr><td><code>type?:</code></td><td><code>LOADING_TYPES</code></td><td><code>LOADING_TYPES.DOM</code></td><td>Start mode</td></tr><tr><td><code>miniClass?:</code></td><td><code>string or null or undefined</code></td><td><code>mini</code></td><td>Start by<strong>MINI</strong>is<strong>class</strong></td></tr><tr><td><code>model?:</code></td><td><code>MODEL_TYPES</code></td><td><code>MODEL_TYPES.RING</code></td><td>Model module</td></tr><tr><td><code>text?:</code></td><td><code>string</code></td><td><code>加载中...</code></td><td>Font content</td></tr><tr><td><code>textGap?:</code></td><td><code>number</code></td><td><code>8</code></td><td>Font spacing</td></tr><tr><td><code>fontSize?:</code></td><td><code>number</code></td><td><code>12</code></td><td>Font size</td></tr><tr><td><code>fontFamily?:</code></td><td><code>string</code></td><td><code>Microsoft YaHei</code></td><td>Font type</td></tr><tr><td><code>delay?:</code></td><td><code>number</code></td><td><code>65</code></td><td>Animation delay</td></tr><tr><td><code>delayColse?:</code></td><td><code>number</code></td><td><code>520</code></td><td>Turn off animation delay</td></tr><tr><td><code>optimization?:</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Optimization processing (not supported temporarily)</td></tr><tr><td><code>zIndex?:</code></td><td><code>string</code></td><td><code>2001</code></td><td>Loading level</td></tr><tr><td><code>themeColor?:</code></td><td><code>string</code></td><td><code>rgba(64,158,255,1)</code></td><td>Theme color</td></tr><tr><td><code>bgColor?:</code></td><td><code>string</code></td><td><code>rgba(0, 0, 0, 0.8)</code></td><td>Background color</td></tr><tr><td><code>shadowColor?:</code></td><td><code>string</code></td><td><code>rgba(64,158,255,0.6)</code></td><td>Shadow color</td></tr><tr><td><code>shadowOffsetX?:</code></td><td><code>number</code></td><td><code>2</code></td><td>Shadow X</td></tr><tr><td><code>shadowOffsetY?:</code></td><td><code>number</code></td><td><code>2</code></td><td>Shadow Y</td></tr><tr><td><code>shadowBlur?:</code></td><td><code>number</code></td><td><code>5</code></td><td>Shadow range</td></tr><tr><td><code>pointerEvents?:</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Event penetration(<strong>DOM</strong>model)</td></tr></tbody></table><ul><li>LOADING_TYPES</li></ul><table><thead><tr><th>attribute</th><th>enum</th><th>remarks</th></tr></thead><tbody><tr><td>DOM</td><td><code>dom</code></td><td>Element</td></tr><tr><td>FULL</td><td><code>full</code></td><td>Full screen</td></tr><tr><td>MINI</td><td><code>mini</code></td><td>Mobile terminal</td></tr></tbody></table><ul><li>MODEL_TYPES</li></ul>`,34),k=n("h3",{id:"model",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#model","aria-hidden":"true"},"#"),s(" model")],-1),m=o(`<h2 id="custom-model" tabindex="-1"><a class="header-anchor" href="#custom-model" aria-hidden="true">#</a> custom model</h2><h3 id="example" tabindex="-1"><a class="header-anchor" href="#example" aria-hidden="true">#</a> example</h3><ul><li>custom</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> OptionsType<span class="token punctuation">,</span> ElementStoreType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/types.d&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 1.Introduction of basic model</span>
<span class="token keyword">import</span> BaseModel <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/draw/model/BaseModel&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 2?.If options in the model need custom parameters, define options type</span>
<span class="token class-name"><span class="token keyword">interface</span></span> CustomOptionsType <span class="token keyword">extends</span> <span class="token class-name">OptionsType</span> <span class="token punctuation">{</span>
  size<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 3.Customize the model (if you don&#39;t need to customize the options parameter, you can use OptionsType)</span>
<span class="token comment">// 3.1?. Define default values</span>
<span class="token keyword">let</span> defOptions<span class="token operator">:</span> CustomOptionsType <span class="token operator">=</span> <span class="token punctuation">{</span>
  size<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// Define default values</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">CustomLoading</span> <span class="token keyword">extends</span> <span class="token class-name">BaseModel<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>w<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> h<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> canvas<span class="token operator">:</span> HTMLCanvasElement<span class="token punctuation">,</span> options<span class="token operator">:</span> Required<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span><span class="token punctuation">,</span> element<span class="token operator">:</span> ElementType<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> canvas<span class="token punctuation">,</span> options<span class="token punctuation">,</span> element<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 3.2?. Initialize default</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initOptions</span><span class="token punctuation">(</span>defOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>draw<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">let</span> op <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">;</span>
        <span class="token comment">// Draw according to the delay time (get the configured custom options parameter here)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token operator">-</span>op<span class="token punctuation">.</span>size <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span>op<span class="token punctuation">.</span>size <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><ul><li><code>BaseModel</code> is a user-defined inheritance class. If it is introduced globally, the element has the <code>BaseModel</code> attribute.</li><li><code>BaseModel</code> will be called internally<code>_$ InitPoint </code> initialization brush <code>translate</code>is in the middle position.</li><li>If the customized <strong>model</strong> does not need the <code>options</code> parameter, you can omit <strong>2, 3.1, 3.2, 4.2</strong> steps.</li></ul></blockquote><ul><li>loading</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> LoadingType<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/types.d&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">MODEL_TYPES</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/utils&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> initLoading <span class="token keyword">from</span> <span class="token string">&#39;web-loading/src/loading&#39;</span>
<span class="token keyword">let</span> dom<span class="token operator">:</span>HtmlElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;xxx&#39;</span><span class="token punctuation">)</span>
<span class="token comment">// 4.Configure customized options parameters</span>
<span class="token keyword">let</span> options<span class="token operator">:</span> CustomOptionsType <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 4.1.After configuring custom, the priority is greater than model</span>
  custom<span class="token operator">:</span> CustomLoading<span class="token punctuation">,</span>
  <span class="token comment">// 4.2.Configure Custom Parameters</span>
  size<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> webLoading<span class="token operator">:</span>LoadingType <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
webLoading<span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span>dom<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="basemodelparameter" tabindex="-1"><a class="header-anchor" href="#basemodelparameter" aria-hidden="true">#</a> <code>BaseModel</code>parameter</h3><blockquote><p><code>WebLoading </code>will automatically inject relevant parameters when calling<code>custom</code>.</p></blockquote><table><thead><tr><th>parameter</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>w</code></td><td><code>number</code></td><td>Canvas Width</td></tr><tr><td><code>h</code></td><td><code>number</code></td><td>Canvas height</td></tr><tr><td><code>canvas</code></td><td><code>HTMLCanvasElement</code></td><td>Canvas element, <code>BaseModel</code> default and get the context of <code>2d</code>, but you can also get other contexts according to the canvas element</td></tr><tr><td><code>options</code></td><td><code>Required&lt;CustomOptionsType&gt;</code></td><td><code>Options</code> is to adjust <strong>model</strong> parameters, which are divided into <strong>public</strong> parameters and <strong>model</strong> parameters, which will be merged eventually, and <code>Required</code> indicates you The parameter of is not empty (has initial value)</td></tr><tr><td><code>element</code></td><td><code>ElementType</code></td><td><a href="#store-elementtype"><code>ElementType</code></a></td></tr></tbody></table><h3 id="store-elementtype" tabindex="-1"><a class="header-anchor" href="#store-elementtype" aria-hidden="true">#</a> <code>store:ElementType</code></h3><blockquote><p>Inherited<code>HTMLElement</code>。</p></blockquote><table><thead><tr><th>attribute</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>loadingId</code></td><td><code>string or null</code></td><td>Record <code>loading</code> element <code>id</code></td></tr><tr><td><code>$store</code></td><td><code>ElementStoreType</code></td><td><a href="#store-elementstoretype">ElementStoreType</a></td></tr><tr><td><code>HTMLElement attribute...</code></td><td>...</td><td>...</td></tr></tbody></table><h3 id="store-elementstoretype" tabindex="-1"><a class="header-anchor" href="#store-elementstoretype" aria-hidden="true">#</a> <code>store:ElementStoreType</code></h3><blockquote><p>When drawing <strong>model</strong>, you need to use some <strong>states</strong> of <code>WebLoading</code>.</p></blockquote><table><thead><tr><th>attribute</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>options</code></td><td><code>OptionsType</code></td><td>Save the final merged <code>options</code> parameter</td></tr><tr><td><code>animationId</code></td><td><code>number or undefined</code></td><td>Record <code>animation</code> status</td></tr><tr><td><code>loadingId</code></td><td><code>string or null</code></td><td>Record <code>loading</code> element <code>id</code></td></tr><tr><td><code>hookCall</code></td><td><code>HooksCallType</code></td><td>Hook function of <code>loading </code></td></tr><tr><td><code>model</code></td><td><code>BaseModel or null</code></td><td><strong>model</strong> in use</td></tr></tbody></table><h3 id="store-hookcall-hookscalltype" tabindex="-1"><a class="header-anchor" href="#store-hookcall-hookscalltype" aria-hidden="true">#</a> <code>store.hookCall:HooksCallType</code></h3><blockquote><p><code>WebLoading</code>The hook function triggered when closing.</p><p><code>HOOKSCALL_KEY</code>Enumeration.</p></blockquote><table><thead><tr><th>attribute</th><th>enum</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>BEFORE_COLSE</code></td><td><code>beforeColse</code></td><td><code>Function</code></td><td>Before closing</td></tr><tr><td><code>COLSED</code></td><td><code>colsed</code></td><td><code>Function</code></td><td>After closing (after deleting elements)</td></tr></tbody></table><p>Take <code>custom</code> as an example</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// Other codes are omitted</span>
<span class="token keyword">class</span> <span class="token class-name">CustomLoading</span> <span class="token keyword">extends</span> <span class="token class-name">BaseModel<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>w<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> h<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> canvas<span class="token operator">:</span> HTMLCanvasElement<span class="token punctuation">,</span> options<span class="token operator">:</span> Required<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span><span class="token punctuation">,</span> element<span class="token operator">:</span> ElementType<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> canvas<span class="token punctuation">,</span> options<span class="token punctuation">,</span> element<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initOptions</span><span class="token punctuation">(</span>defOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>draw<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>store<span class="token punctuation">.</span>hookCall<span class="token punctuation">.</span><span class="token function">beforeColse</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 builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Before closing&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>store<span class="token punctuation">.</span>hookCall<span class="token punctuation">.</span><span class="token function">colsed</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 builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;After closing&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> op <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="basemodel-function" tabindex="-1"><a class="header-anchor" href="#basemodel-function" aria-hidden="true">#</a> <code>BaseModel function</code></h3><blockquote><p><code>BaseModel</code>The built-in function is mainly for user <strong>extension model</strong> rendering</p></blockquote><table><thead><tr><th>function</th><th>return</th><th>remarks</th></tr></thead><tbody><tr><td><code>initOptions</code></td><td><code>void</code></td><td><a href="#basemodel-initoptions">initOptions</a></td></tr><tr><td><code>run</code></td><td><code>void</code></td><td><a href="#basemodel-run">run</a></td></tr><tr><td><code>clearRect</code></td><td><code>void</code></td><td><a href="#basemodel-clearrect">clearRect</a></td></tr><tr><td><code>drowRadiusRect</code></td><td><code>void</code></td><td><a href="#basemodel-drowradiusrect">drowRadiusRect</a></td></tr><tr><td><code>clearAnimationFrame</code></td><td><code>void</code></td><td><a href="#basemodel-clearanimationframe">clearAnimationFrame</a></td></tr></tbody></table><h3 id="basemodel-initoptions" tabindex="-1"><a class="header-anchor" href="#basemodel-initoptions" aria-hidden="true">#</a> <code>BaseModel:initOptions</code></h3><blockquote><p>It is mainly used to initialize the default parameters so that the <code>options</code> in the drawing <strong>model</strong> will not be empty.</p></blockquote><table><thead><tr><th>parameter</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>options</code></td><td><code>T extends OptionsType</code></td><td>Initialize default parameters</td></tr><tr><td><code>limits?:</code></td><td><code>Array&lt;LimitType&gt;</code></td><td>Limit of value</td></tr></tbody></table><h3 id="basemodel-initoptions-limittype" tabindex="-1"><a class="header-anchor" href="#basemodel-initoptions-limittype" aria-hidden="true">#</a> <code>BaseModel.initOptions:LimitType</code></h3><blockquote><p>It is used to determine whether the <code>options</code> passed in exceeds the expected range of the <strong>model</strong> drawn.</p></blockquote><table><thead><tr><th>attribute</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>key</code></td><td><code>string</code></td><td>Attribute of <code>options</code> to be judged</td></tr><tr><td><code>message</code></td><td><code>string</code></td><td>Prompt text if the judgment is effective</td></tr><tr><td><code>limit</code></td><td><code>(key: any) =&gt; boolean</code></td><td>Judge the condition. The key is the value passed in by <code>options</code>. If it is returned as<code> false</code>, it means that it exceeds the expectation</td></tr></tbody></table><p>Take <code>custom</code> as an example</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// Other codes are omitted</span>
<span class="token keyword">let</span> defOptions<span class="token operator">:</span> CustomOptionsType <span class="token operator">=</span> <span class="token punctuation">{</span>
    size<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// Define default values</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> limits <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        key<span class="token operator">:</span> <span class="token string">&#39;size&#39;</span><span class="token punctuation">,</span>
        message<span class="token operator">:</span> <span class="token string">&#39;16 &gt;= size(default:10) &gt;= 5&#39;</span><span class="token punctuation">,</span>
        <span class="token function-variable function">limit</span><span class="token operator">:</span> <span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token comment">// You can also force modification if triggered</span>
            <span class="token keyword">return</span>  <span class="token number">16</span> <span class="token operator">&gt;=</span> key <span class="token operator">&amp;&amp;</span> key <span class="token operator">&gt;=</span> <span class="token number">5</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
<span class="token keyword">class</span> <span class="token class-name">CustomLoading</span> <span class="token keyword">extends</span> <span class="token class-name">BaseModel<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>w<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> h<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> canvas<span class="token operator">:</span> HTMLCanvasElement<span class="token punctuation">,</span> options<span class="token operator">:</span> Required<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span><span class="token punctuation">,</span> element<span class="token operator">:</span> ElementType<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> canvas<span class="token punctuation">,</span> options<span class="token punctuation">,</span> element<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initOptions</span><span class="token punctuation">(</span>defOptions<span class="token punctuation">,</span>limits<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="basemodel-run" tabindex="-1"><a class="header-anchor" href="#basemodel-run" aria-hidden="true">#</a> <code>BaseModel:run</code></h3><blockquote><p>The <code>requestAnimationFrame</code> is delayed according to the <code>options.delay</code>.</p></blockquote><table><thead><tr><th>parameter</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>fun</code></td><td><code>Function</code></td><td>If it is loading before calling, the last state will be cleared.</td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</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">// Triggered according to options.delay</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="basemodel-clearrect" tabindex="-1"><a class="header-anchor" href="#basemodel-clearrect" aria-hidden="true">#</a> <code>BaseModel:clearRect</code></h3><blockquote><p>Empty the canvas.</p></blockquote><table><thead><tr><th>parameter</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>x?:</code></td><td><code>number</code></td><td>Empty starting point X</td></tr><tr><td><code>y?:</code></td><td><code>number</code></td><td>Empty starting point Y</td></tr><tr><td><code>w_r?:</code></td><td><code>number</code></td><td>Empty end X (width), in case of circular emptying <code>w_ R</code> is <strong>radius</strong></td></tr><tr><td><code>h?:</code></td><td><code>number</code></td><td>Empty end Y (height)</td></tr></tbody></table><ul><li>Empty all</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>Considering that the drawing area may exceed the default width and height, emptying all will empty <strong>twice</strong> the width and height.</p></blockquote><ul><li>Custom Emptying</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>Emptying starts at the coordinates of <code>x=0, y=0</code> and ends at <code>x=100, y=100</code>.</p></blockquote><ul><li>Empty circular area</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>Empty the area with <code>x=0, y=0</code> and radius of <code>10</code>.</p></blockquote><h3 id="basemodel-drowradiusrect" tabindex="-1"><a class="header-anchor" href="#basemodel-drowradiusrect" aria-hidden="true">#</a> <code>BaseModel:drowRadiusRect</code></h3><blockquote><p>Draw a rectangle with rounded corners.</p></blockquote><table><thead><tr><th>parameter</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>x</code></td><td><code>number</code></td><td>Start X</td></tr><tr><td><code>y</code></td><td><code>number</code></td><td>Start Y</td></tr><tr><td><code>w</code></td><td><code>number</code></td><td>End X (width)</td></tr><tr><td><code>h</code></td><td><code>number</code></td><td>End Y (height)</td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">drowRadiusRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span>
<span class="token comment">// Need to draw by yourself</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>Draw a rectangle with <code>x=0, y=0</code> width and height of <code>100</code> and rounded corners of <code>10</code>.</p></blockquote><h3 id="basemodel-clearanimationframe" tabindex="-1"><a class="header-anchor" href="#basemodel-clearanimationframe" aria-hidden="true">#</a> <code>BaseModel:clearAnimationFrame</code></h3><blockquote><p>Empty (stop)<code>requestAnimationFrame</code>。</p></blockquote><table><thead><tr><th>parameter</th><th>type</th><th>remarks</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>number</code></td><td><code>animationId</code></td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearAnimationFrame</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>$store<span class="token punctuation">.</span>animationId<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>The ID passed in is <code>id</code> returned by <code>requestAnimationFrame</code> , and <code>WebLoading</code> has been saved in the store.</p></blockquote><h3 id="dynamic-options" tabindex="-1"><a class="header-anchor" href="#dynamic-options" aria-hidden="true">#</a> Dynamic options</h3><blockquote><p>Whether it is initialization or in the <code>run</code> function, modifying <code>options</code> is real-time and dynamic, which can control the delay time triggered by<code>requestAnimationFrame</code>to be irregular.</p></blockquote><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</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">// Dynamic modification of delay will affect the trigger of run function</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>delay <span class="token operator">=</span> <span class="token number">10</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="basemodel-custom-example" tabindex="-1"><a class="header-anchor" href="#basemodel-custom-example" aria-hidden="true">#</a> <code>BaseModel</code> Custom example</h3><blockquote><p>It is convenient to use native html here. The global import method is adopted.</p></blockquote><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>web-loading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
          id:
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>001<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
          user:
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>use1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</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">// encapsulation</span>
        <span class="token keyword">let</span> defOptions <span class="token operator">=</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">10</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">class</span> <span class="token class-name">CustomLoading</span> <span class="token keyword">extends</span> <span class="token class-name">BaseModel</span> <span class="token punctuation">{</span>
          <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> canvas<span class="token punctuation">,</span> options<span class="token punctuation">,</span> store</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">super</span><span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> canvas<span class="token punctuation">,</span> options<span class="token punctuation">,</span> store<span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initOptions</span><span class="token punctuation">(</span>defOptions<span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>draw<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
          <span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token keyword">let</span> op <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options
            <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token operator">-</span>op<span class="token punctuation">.</span>size <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span>op<span class="token punctuation">.</span>size <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token comment">// loading</span>
        <span class="token keyword">let</span> docApp <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;#app&#39;</span><span class="token punctuation">)</span>
        <span class="token keyword">const</span> webLoading <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">custom</span><span class="token operator">:</span> CustomLoading<span class="token punctuation">,</span>
          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">20</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;resize&#39;</span><span class="token punctuation">,</span> webLoading<span class="token punctuation">.</span>resize<span class="token punctuation">)</span>
        webLoading<span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span>docApp<span class="token punctuation">)</span>
        <span class="token function">setTimeout</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>
          webLoading<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> <span class="token number">1500</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">#app</span> <span class="token punctuation">{</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
      <span class="token property">padding</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px solid gray<span class="token punctuation">;</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
      <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">#app .item</span> <span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
      <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px solid gray<span class="token punctuation">;</span>
      <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
      <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
      <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">#app .item .value</span> <span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
      <span class="token property">min-width</span><span class="token punctuation">:</span> 31px<span class="token punctuation">;</span>
      <span class="token property">min-height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
      <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>64<span class="token punctuation">,</span> 158<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>Here, a custom <code>CustomLoading model</code> is defined. After obtaining the inverted <code>size</code> parameter, a Rect rectangle is drawn for each frame in the <code>run</code> function. <code>defOptions</code> is the default<code> options</code> value of the custom model, which can also be modified at the current <code>init</code> time</p></blockquote><h2 id="html-configuration-method" tabindex="-1"><a class="header-anchor" href="#html-configuration-method" aria-hidden="true">#</a> Html configuration method</h2><blockquote><p>Add <strong>html</strong> configuration to <code>options</code>, which has priority over <strong>model</strong> and <code>custom</code>.</p></blockquote><h3 id="initialization" tabindex="-1"><a class="header-anchor" href="#initialization" aria-hidden="true">#</a> initialization</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> initLoading <span class="token keyword">from</span> <span class="token string">&#39;web-loading/src/loading&#39;</span>
<span class="token keyword">let</span> webLoading <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    html<span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">&lt;div class=&quot;spinner&quot;&gt;
    &lt;svg viewBox=&quot;25 25 50 50&quot; class=&quot;circular&quot;&gt;
        &lt;circle stroke-miterlimit=&quot;10&quot; stroke-width=&quot;3&quot; fill=&quot;none&quot; r=&quot;20&quot; cy=&quot;50&quot; cx=&quot;50&quot; class=&quot;path&quot;&gt;&lt;/circle&gt;
    &lt;/svg&gt;
&lt;/div&gt;</span><span class="token template-punctuation string">\`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p><strong>Html</strong> priority is higher than <strong>custom</strong>.</p></blockquote><h3 id="css-animation" tabindex="-1"><a class="header-anchor" href="#css-animation" aria-hidden="true">#</a> Css animation</h3><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.spinner</span> <span class="token punctuation">{</span>
  <span class="token property">--red</span><span class="token punctuation">:</span> #d62d20<span class="token punctuation">;</span>
  <span class="token property">--blue</span><span class="token punctuation">:</span> #0057e7<span class="token punctuation">;</span>
  <span class="token property">--green</span><span class="token punctuation">:</span> #008744<span class="token punctuation">;</span>
  <span class="token property">--yellow</span><span class="token punctuation">:</span> #ffa700<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.spinner:before</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.circular</span> <span class="token punctuation">{</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> rotate73451 2s linear infinite<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> center center<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.path</span> <span class="token punctuation">{</span>
  <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 1<span class="token punctuation">,</span> 200<span class="token punctuation">;</span>
  <span class="token property">stroke-dashoffset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> dash0175 1.5s ease-in-out infinite<span class="token punctuation">,</span> color7123 6s ease-in-out infinite<span class="token punctuation">;</span>
  <span class="token property">stroke-linecap</span><span class="token punctuation">:</span> round<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> rotate73451</span> <span class="token punctuation">{</span>
  <span class="token selector">100%</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> dash0175</span> <span class="token punctuation">{</span>
  <span class="token selector">0%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 1<span class="token punctuation">,</span> 200<span class="token punctuation">;</span>
    <span class="token property">stroke-dashoffset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">50%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 89<span class="token punctuation">,</span> 200<span class="token punctuation">;</span>
    <span class="token property">stroke-dashoffset</span><span class="token punctuation">:</span> -35px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">100%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 89<span class="token punctuation">,</span> 200<span class="token punctuation">;</span>
    <span class="token property">stroke-dashoffset</span><span class="token punctuation">:</span> -124px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> color7123</span> <span class="token punctuation">{</span>
  <span class="token selector">100%, 0%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">40%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">66%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">80%, 90%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>The class naming should try to isolate external elements.</p></blockquote>`,73);function v(b,h){const a=c("RouterLink");return i(),l("div",null,[u,n("blockquote",null,[n("p",null,[s("The use here takes the introduction separately as an example,"),t(a,{to:"/us/guide/#global-introduction"},{default:e(()=>[s("Global introduction")]),_:1}),s("Use similar.")])]),r,n("p",null,[t(a,{to:"/us/document/model.html#supported-models"},{default:e(()=>[s("Supported models")]),_:1})]),k,n("p",null,[t(a,{to:"/us/document/model.html"},{default:e(()=>[s("Model configuration details")]),_:1})]),m])}const y=p(d,[["render",v],["__file","use.html.vue"]]);export{y as default};
