Amaze UI

progressBar


用于展示操作进度,告知用户当前状态和预期。

基础用法

Copy
<div data-am-progressbar="{percentage:'0'}"></div>
<div data-am-progressbar="{percentage:'60'}"></div>
<div data-am-progressbar="{percentage:'100'}"></div>
  • 使用参数 percentage 设置初始进度条百分比
  • 进度完成,进度条转变颜色

在线运行

环形进度

Copy
<div data-am-progressbar="{percentage:'20', type: 'circle'}"></div>
<div data-am-progressbar="{percentage:'60', type: 'circle'}"></div>
<div data-am-progressbar="{percentage:'100', type: 'circle'}"></div>

设置 typecircle

在线运行

文字内显

Copy
<div data-am-progressbar="{percentage:'20', textInner: true}"></div>
<div data-am-progressbar="{percentage:'60', textInner: true}"></div>
<div data-am-progressbar="{percentage:'100', textInner: true}"></div>

设置 textInnertrue

在线运行

自定义文字

Copy
<div data-am-progressbar="{percentage:'20', textDes:'天'}"></div>
<div data-am-progressbar="{percentage:'50', textDes: 'T'}"></div>
<div data-am-progressbar="{percentage:'80', textDes:'D'}"></div>

使用参数 textDes 更改进度条内文字。

在线运行

主题用法

Copy
<div data-am-progressbar="{percentage:'20'}"></div>
<div data-am-progressbar="{percentage:'40', status:'success'}"></div>
<div data-am-progressbar="{percentage:'60', status:'warning'}"></div>
<div data-am-progressbar="{percentage:'80', status:'danger'}"></div>

通过 status 参数来改变颜色。

  • success
  • warning
  • danger

在线运行

尺寸用法

Copy
<div data-am-progressbar="{percentage:'20', size: 'xs'}"></div>
<div data-am-progressbar="{percentage:'20', size: 'sm'}"></div>
<div data-am-progressbar="{percentage:'20', type: 'circle', size: 'sm'}"></div>

线状进度条:

  • sm - 8px
  • xs - 4px

环状进度条:

  • sm - 100px

在线运行

触发方式

动态控制

Copy
<div id="prgress-bar"></div>
<button class="am-btn am-btn-primary" id="pb-start">初始化</button>
<button class="am-btn am-btn-primary" id="pb-step">步进</button>
<button class="am-btn am-btn-primary" id="pb-20">20%进度</button>
<button class="am-btn am-btn-primary" id="pb-70">70%进度</button>
<button class="am-btn am-btn-primary" id="pb-break">进度中断</button>
<script>
$(function() {
  $('#prgress-bar').progressbar();
  $('#pb-start').on('click', function() {
    $('#prgress-bar').progressbar('reinit');
  });
  $('#pb-20').on('click', function() {
    $('#prgress-bar').progressbar('set', 20)
  });
  $('#pb-70').on('click', function() {
    $('#prgress-bar').progressbar('set', 70)
  });
  $('#pb-step').on('click', function() {
    $('#prgress-bar').progressbar('step', 10)
  });
  $('#pb-break').on('click', function() {
    $('#prgress-bar').progressbar('break')
  });
})
</script>

使用 $().progressbar(options) 来设置相关参数。

  • reinit 初始化。
  • set 设置参数。
  • break 中断进度。

更多可以查看API参数。

在线运行

参数说明

  size: null, // String: sm
  type: 'line', // String: line, circle
  percentage: 0, // Number: 0 - 100
  text: true,   // Boolean: show text, default true
  textDes: '%', // String: text description
  textInner: false, // String: text position
  status: null, // String[set initial status]: success, warning, danger
  iconDone: '<i class="am-icon-check am-icon-fw"></i>',
  iconBreak: '<i class="am-icon-close am-icon-fw"></i>',

方法 REMOVED

参数描述
get获取当前进度
set设置进度
step逐步增加进度
break中断进度
reinit初始化
destory销毁实例

自定义方法 REMOVED

参数描述
change.progressbar.amui进度改变立即触发
done.progressbar.amui进度条达 100% 立即触发
break.progressbar.amui进度中断立即触发