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

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

<article>
  <section class="markdown">
    <h1>Progress<span class="subtitle">进度条</span></h1>
    <section class="markdown"><p>展示操作的当前进度。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <p>在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。</p>
      <ul>
        <li><p>当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；</p></li>
        <li><p>当需要显示一个操作完成的百分比时。</p></li>
      </ul>
    </section>
    <h2><span>代码演示</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'进度条'" id="components-progress-demo-basic" [nzCode]="NzDemoProgressBasicCode">
        <nz-demo-progress-basic demo></nz-demo-progress-basic>
        <div intro>
          <p>标准的进度条。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'小型进度条'" id="components-progress-demo-line-mini" [nzCode]="NzDemoProgressLineMiniCode">
        <nz-demo-progress-line-mini demo></nz-demo-progress-line-mini>
        <div intro>
          <p>适合放在较狭窄的区域内。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'进度圈动态展示'" id="components-progress-demo-circle-dynamic" [nzCode]="NzDemoProgressCircleDynamicCode">
        <nz-demo-progress-circle-dynamic demo></nz-demo-progress-circle-dynamic>
        <div intro>
          <p>会动的进度条才是好进度条。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义文字格式'" id="components-progress-demo-format" [nzCode]="NzDemoProgressFormatCode">
        <nz-demo-progress-format demo></nz-demo-progress-format>
        <div intro>
          <p><code>format</code> 属性指定格式。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'进度圈'" id="components-progress-demo-circle" [nzCode]="NzDemoProgressCircleCode">
        <nz-demo-progress-circle demo></nz-demo-progress-circle>
        <div intro>
          <p>圈形的进度。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'小型进度圈'" id="components-progress-demo-circle-mini" [nzCode]="NzDemoProgressCircleMiniCode">
        <nz-demo-progress-circle-mini demo></nz-demo-progress-circle-mini>
        <div intro>
          <p>小一号的圈形进度。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'动态展示'" id="components-progress-demo-line-dynamic" [nzCode]="NzDemoProgressLineDynamicCode">
        <nz-demo-progress-line-dynamic demo></nz-demo-progress-line-dynamic>
        <div intro>
          <p>会动的进度条才是好进度条。</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>nzType</td>
          <td>类型，可选 <code>line</code><code>circle</code>
          </td>
          <td>String</td>
          <td>line</td>
        </tr>
        <tr>
          <td>ngModel</td>
          <td>百分比</td>
          <td>Number</td>
          <td>0</td>
        </tr>
        <tr>
          <td>nzFormat</td>
          <td>内容的模板函数</td>
          <td>function(percent)</td>
          <td><code>percent =&gt; percent + '%'</code></td>
        </tr>
        <tr>
          <td>nzStatus</td>
          <td>状态，可选：<code>success</code><code>exception</code><code>active</code>
          </td>
          <td>String</td>
          <td></td>
        </tr>
        <tr>
          <td>nzShowInfo</td>
          <td>是否显示进度数值或状态图标</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzStrokeWidth <code>(nzType='line')</code>
          </td>
          <td>进度条线的宽度，单位 px</td>
          <td>Number</td>
          <td>10</td>
        </tr>
        <tr>
          <td>nzStrokeWidth <code>(nzType='circle')</code>
          </td>
          <td>圆形进度条线的宽度，单位是进度条画布宽度的百分比</td>
          <td>Number</td>
          <td>6</td>
        </tr>
        <tr>
          <td>nzWidth <code>(nzType='circle')</code>
          </td>
          <td>圆形进度条画布宽度，单位 px</td>
          <td>Number</td>
          <td>132</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>