ng-ytl-zorro-antd/src/showcase/nz-demo-spin/nz-demo-spin.html

An enterprise-class UI components based on Ant Design and Angular

<article>

  <section class="markdown">
    <h1>Spin 加载中</h1>
    <section class="markdown"><p>用于页面和区块的加载中状态。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <p>页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。</p></section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>

  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'基本用法'" id="components-spin-demo-basic" [nzCode]="NzDemoSpinBasicCode">
        <nz-demo-spin-basic demo></nz-demo-spin-basic>
        <div intro>
          <p>一个简单的loading状态。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'容器'" id="components-spin-demo-inside" [nzCode]="NzDemoSpinInsideCode">
        <nz-demo-spin-inside demo></nz-demo-spin-inside>
        <div intro>
          <p>放入一个容器中。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义描述文案'" id="components-spin-demo-tip" [nzCode]="NzDemoSpinTipCode">
        <nz-demo-spin-tip demo></nz-demo-spin-tip>
        <div intro>
          <p>自定义描述文案，指定的 nzTip 文案会直接代替 <code>...</code></p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'各种大小'" id="components-spin-demo-size" [nzCode]="NzDemoSpinSizeCode">
        <nz-demo-spin-size demo></nz-demo-spin-size>
        <div intro>
          <p>小的用于文本加载，默认用于卡片容器级加载，大的用于页面级加载。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'卡片加载中'" id="components-spin-demo-nested" [nzCode]="NzDemoSpinNestedCode">
        <nz-demo-spin-nested demo></nz-demo-spin-nested>
        <div intro>
          <p>可以直接把内容内嵌到 <code>nz-spin</code> 中，将现有容器变为加载状态。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>类型</th>
          <th>默认值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzSize</td>
          <td>enum</td>
          <td>default</td>
          <td>spin组件中点的大小，可选值为 small default large</td>
        </tr>
        <tr>
          <td>nzSpinning</td>
          <td>Boolean</td>
          <td>true</td>
          <td>用于内嵌其他组件的模式，可以关闭 loading 效果</td>
        </tr>
        <tr>
          <td>nzTip</td>
          <td>String</td>
          <td>无</td>
          <td>自定义描述文案</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>