kero
Version:
69 lines (59 loc) • 2.58 kB
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>