菜单

进度条
进度条显示任务进度

下载

类型

标准 (Standard)

一个标准的进度条

上传文件

指示 (Indicating)

指示进度条直观地显示当前任务的进度级别

基金

内容

条形 (Bar)

进度可以包含可视化显示进度的条形图

进度 (Progress)

进度条可以包含表示当前进度的数值

标签 (Label)

进度条可以包含标签

上传文件

状态

激活 (Active)

进度条显示激活状态

上传文件

成功 (Success)

进度条可以显示成功的状态

万事俱比,已经完成。

警告 (Warning)

进度条可以显示警告的状态

您的文件不符合最低分辨率要求。

错误 (Error)

进度条可以显示错误的状态

这里有个错误

禁用 (Disabled)

进度条可以被禁用

变形

反色 (Inverted)

进度条可以让它的颜色反色显示

上传文件
成功
警告
错误

附属 (Attached)

进度条可以显示一个元素的进度

La la la la

项目
开始于 2014

尺寸 (Size)

进度条可以有不同的尺寸

一些小的尺寸可能无法适应一个内联标签
Tiny
Small
Standard
Large
Big

颜色 (Color)

进度条可以有不同的颜色

反色 (Inverted Color)

这些颜色可以在黑暗背景中使用以提高对比度

初始化进度条

数据元 (With metadata)

进度条可以与数据元一起被初始化

$('#example1').progress();
74% Funded

结合JS (With Javascript)

进度条可以用 Javascript 进行初始化

$('#example2').progress({ percent: 22 });
22% Earned

任务完成率

添加总值 (Adding a Total Value)

进度条可以跟踪当前值作为总值的比率。这是有用的跟踪一系列事件的进展与已知的数量,例如“上传1的20”照片。这对跟踪时间完成的比例非常有用,比如“上传 1/20 图片” 。

每次调用增量增加1,或者指定第二个参数的值。

$('#example3') .progress('increment') ;
添加图片
$('#example3') .progress({ total: 3 }) ;

数据元初始化 (Initializing with Metadata)

进度条可以跟踪当前值作为总值的比率。这是有用的跟踪一系列事件的进展与已知的数量,例如“上传1的20”照片。这对跟踪时间完成的比例非常有用,比如“上传 1/20 图片” 。

每次调用增量增加1,或者指定第二个参数的值。

此外,你可以设置每个阶段状态显示的文本信息,这个信息将在进度条达到那个百分比时自动更新显示。

$('#example4') .progress('increment') ;
添加照片

添加自定义标签 (Adding Custom Labels)

你可以设置每个阶段状态显示的文本信息,这个信息将在进度条达到那个百分比时自动更新显示。

你可以使用 标签(label) 设置来改变两个预设消息的显示值。此外你可以在模板中自动以显示文本(text)

{percent} 当前君度
{value} 当前值
{total} 总值
{left} 剩下进度, 或者 % 进度剩下
$('#example5') .progress('increment') ;
添加图片
$('#example5') .progress({ text: { active : 'Adding {value} of {total} photos', success : '{total} Photos Uploaded!' } }) ;

翻译 (Translation)

你可以调整文本标签以帮助翻译

$('#example6') .progress('increment') ;
文本名字
$('#example6') .progress({ label: 'ratio', text: { ratio: '{value} de {total}' } }) ;

行为

以下所有行为都可用如下语法调用:

$('.your.element') .progress('behavior name', argumentOne, argumentTwo) ;
行为 描述
set percent(percent) 设置当前百分比的进度值。如果使用总计将从百分比转换为估计值。
set progress(value) 将进度设置为指定值。将自动计算百分比。
increment(incrementValue) 百分比增量值,如果没指定,则使用随机值。
decrement(decrementValue) 百分比减量值,如果没指定,则使用随机值。
update progress(value) 立即更新进度值,忽略进度动画间隔延迟。
complete 完整总进度,设置加载显示为 100%。
reset 重置进度条为0。
set total(total) 设置进度总量。
get text(text) 获得进度条文本值。
get normalized value(value) 返回在指定的可接受范围内的标准化值。
get percent 返回最后指定的百分比。
get value 返回当前进度值。
get total 返回总量。
is complete 判断进度是否完成。
is success 返回进度条是否是成功状态。
is warning 返回进度条是否是警告状态。
is error 返回进度条是否是错误状态。
is active 返回进度条是否是激活状态。
set active 设置进度条为激活状态。
set warning 设置进度条为警告状态。
set success 设置进度条为成功状态。
set error 设置进度条为错误状态。
set duration(value) 改变进度条动画速度。
set label(text) 设置进度的标签文本。
set bar label(text) 设置进度条的标签文本。
remove active 将进度条移动到激活状态。
remove warning 将进度条移动到警告状态。
remove success 将进度条移动到成功状态。
remove error 将进度条移动到错误状态。

例子

快速更新进度 (Frequently Updated Progress)

进度条在完成动画后,将自动转换为结束状态。即使发生的事件比进度条UI动画块,也能顺利的完成。

Rapidly Update
请点击按钮
$('.rapid.example .ui.button') .on('click', function() { var $progress = $('.rapid.example .ui.progress'), $button = $(this), updateEvent ; // restart to zero clearInterval(window.fakeProgress) $progress.progress('reset'); // updates every 10ms until complete window.fakeProgress = setInterval(function() { $progress.progress('increment'); $button.text( $progress.progress('get value') ); // stop incrementing when complete if($progress.progress('is complete')) { clearInterval(window.fakeProgress) } }, 10); }) ; $('.rapid.example .ui.progress') .progress({ duration : 200, total : 200, text : { active: '{value} of {total} done' } }) ;

进度条设置
表单的设置将修改标签的行为

设置 默认 描述
autoSuccess true 当进度完成时,是否应该自动切换到成功状态。
showActivity true 当进度递增时,是否应该自动显示为激活状态。
limitValues true 当设置为true的时候,进度值如果计算在100%以上,或者0%以下,会自动修正。当设置为false的时候,不恰当的值将显示错误提示。
label percent 设置的时候可以显示为 percent 或者 ratio。匹配到同名的相应文本模板。
random
className : { active : 'active', error : 'error', success : 'success', warning : 'warning' }
没有指定递增值时,这将用一个范围内的随机数作为递增值。
precision 1 计算进度的小数点精度
total false 设置一个总量值,每一次递增的调用将越来越靠近总值。(i.e. 1/20, 2/20 etc)
value false 设置当前值,当总值被指定时,这可以用来计算总比例。

回调函数

回调函数指定某个行为发生后,会调用一个函数执行。

参数 语境 描述
onChange percent, value, total Progress 进度条进度改变时调用函数
onSuccess total Progress 进度条为成功状态时调用函数
onActive value, total Progress 进度条被激活时时调用函数
onError value, total Progress 进度条为错误状态时调用函数
onWarning value, total Progress 进度条为警告状态时调用函数

DOM 设置
DOM 设置指定模块怎么接入

设置 默认 描述
namespace progress 事件命名空间,确保模块不受其他影响。
text
text : { active : false, error : false, success : false, warning : false, percent : '{percent}%', ratio : '{value} of {total}' }
每一个状态的文本显示,魔板形式为 {percent}, {value}, {total}
regExp
regExp: { variable: /\{\$*[A-z0-9]+\}/g }
模块使用的正则表达式
selector
selector : { bar : '> .bar', label : '> .label', progress : '.bar > .progress' }
模块选择器
metadata
metadata: { percent : 'percent', total : 'total', value : 'value' }
模块使用的 DOM 元数据
className
className : { active : 'active', error : 'error', success : 'success', warning : 'warning' }
用来指定风格的类名

调试设置
调试设置控制调试信息的输出

设置 默认 描述
name Progress 在调试日志中使用的名字
silent False 禁用所有信息输出,包括错误。
debug False 提供标准调试输出到控制台
performance True 提供标准调试输出到控制台
verbose True 提供辅助调试输出到控制台
errors
error : { method : 'The method you called is not defined.', nonNumeric : 'Progress value is non numeric' }