kero/snippets/examples/dt/datatable/progress/widget.html

<div class="u-container-fluid u-widget-bg">
    <div class="u-row">
       
        <div class="u-col-md-12">
            <div class="u-widget  u-widget-middle">

                <div class="u-widget-heading">
                    <h3 class="u-widget-title">默认进度条</h3>
                </div>
                <div class="u-widget-body">
                 <!-- 简单进度条代码 -->
                    <div id="p1" class="u-progress"></div>
                </div>

            </div>
        </div>
        
         <div class="u-col-md-12">
            <div class="u-widget  u-widget-middle">

                <div class="u-widget-heading">
                    <h3 class="u-widget-title">不确定进度的进度条</h3>
                </div>
                <div class="u-widget-body">
                  <!--不确定进度的进度条代码 -->
                  <div id="p2" class="u-progress u-progress__indeterminate"></div>
                </div>

            </div>
        </div>
         <div class="u-col-md-12">
            <div class="u-widget  u-widget-middle">

                <div class="u-widget-heading">
                    <h3 class="u-widget-title">缓冲进度条</h3>
                </div>
                <div class="u-widget-body">
                <!-- 有缓冲标识的进度条代码 -->
                    <div id="p3" class="u-progress"></div>
                </div>

            </div>
        </div>

        <div class="u-col-md-12">
            <div class="u-widget u-widget-middle">
                <div class="u-widget-heading">
                    <h3 class="u-widget-title">动态进度条卡片</h3>
                </div>
                <div class="u-widget-body">
                    <!--动态进度条卡片代码 -->
                    <div class="progress-card">
                        <div class="progress-title">计算</div>
                        <span class="progress-close">×</span>
                        <div class="progress-content">
                            <div>正在分配数据......</div>
                            <div id="p5" class="u-progress"></div>
                            <div>已完成 <span id='proInfoNum' class="bold">0/1000</span>,<span class="red">0</span>条处理失败</div>
                        </div>
                        <div class="progress-end">
                            <button class="close u-button raised">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>