我们承诺每个页面最多显示一个小型广告。别担心，隐藏此消息将确保您不会再被烦扰。
类型
标准
一个标准的进度条
上传文件
指示
指示性进度条直观地指示任务当前的进度水平
资金
内容
条
进度元素可以包含一个直观地指示进度的条形
进度条
进度条可以包含一个文本值，指示当前进度
标签
进度元素可以包含一个标签
上传文件
状态
活动
进度条可以显示活动状态
上传文件
成功
进度条可以显示成功状态
一切顺利，您的文件已准备就绪。
警告
进度条可以显示警告状态
您的文件未满足最低分辨率要求。
错误
进度条可以显示错误状态
出现错误。
禁用
进度条可以被禁用
变体
反转
进度条的颜色可以反转
上传文件
成功
警告
错误
附加
进度条可以显示元素的进度
啦啦啦啦
尺寸
进度条的尺寸可以变化
微型
小型
标准
大型
巨大
颜色
可以有不同的颜色
反转颜色
这些颜色也可以反转，以在深色背景上提高对比度
初始化进度条
使用元数据
进度条可以使用元数据初始化
$('#example1').progress();
74% 已筹集
使用 Javascript
进度条可以使用 Javascript 设置对象初始化
$('#example2').progress({ percent: 22 });
22% 已赚取
任务完成百分比
添加总值
进度条可以跟踪当前值作为总值的比率。这对于跟踪已知数量的一系列事件的进度很有用，例如上传“1/20”张照片。
每次调用 increment 都会将值增加 1 或作为第二个参数指定的 value。
$('#example3') .progress('increment') ;
添加照片
$('#example3') .progress({ total: 3 }) ;
使用元数据初始化
进度条可以跟踪当前值作为总值的比率。这对于跟踪已知数量的一系列事件的进度很有用，例如上传“1/20”张照片。
每次调用 increment 都会将值增加 1 或作为第二个参数指定的 value。
此外，您还可以传递每个进度条可用状态的模板文本，这些文本会在进度条达到该状态时自动更新
$('#example4') .progress('increment') ;
添加照片
添加自定义标签
您还可以传递每个进度条可用状态的模板文本，这些文本会在进度条达到该状态时自动更新
您可以使用 label 设置在两个预设消息之间更改进度条标签。此外，您还可以通过在 text 中指定模板文本来自定义消息本身。模板字符串将在渲染时替换三个值
| {percent} | 当前百分比 |
| {value} | 当前值 |
| {total} | 总值 |
| {left} | 距离总值或剩余进度百分比 |
$('#example5') .progress('increment') ;
添加照片
$('#example5') .progress({ text: { active : '添加 {value} 张照片，共 {total} 张', success : '{total} 张照片已上传！' } }) ;
翻译
您还可以调整文本标签，以帮助字符串显示为翻译后的
$('#example6') .progress('increment') ;
Carga de archivos
$('#example6') .progress({ label: 'ratio', text: { ratio: '{value} de {total}' } }) ;
行为
所有以下行为都可以使用以下语法调用
$('.your.element') .progress('behavior name', argumentOne, argumentTwo) ;
| 行为 | 描述 |
|---|---|
| set percent(percent) | 将当前进度百分比设置为 value。如果使用总值，则会从百分比转换为估计值。 |
| set progress(value) | 将进度设置为指定的值。会自动根据总值计算百分比。 |
| increment(incrementValue) | 将进度增加 increment value，如果没有传递 value，则会使用设置中指定的随机数量 |
| decrement(decrementValue) | 将进度减少 decrement value，如果没有传递 value，则会使用设置中指定的随机数量 |
| update progress(value) | 立即将进度更新为 value，忽略进度动画间隔延迟 |
| complete | 完成进度并将 loaded 设置为 100% |
| reset | 将进度重置为零 |
| set total(total) | 将总值设置为新值 |
| get text(text) | 将模板字符串替换为 value、total、剩余百分比和百分比。 |
| 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) | 将进度外部标签设置为 text |
| set bar label(text) | 将进度条标签设置为 text |
| remove active | 将进度从活动状态中删除 |
| remove warning | 将进度从警告状态中删除 |
| remove success | 将进度从成功状态中删除 |
| remove error | 将进度从错误状态中删除 |
示例
频繁更新进度
进度条会在完成动画后自动轮询最后一个进度值，这样动画缓动就可以平滑地继续，即使更新事件比 UI 更新更频繁。
快速更新等待您按下按钮
$('.rapid.example .ui.button') .on('click', function() { var $progress = $('.rapid.example .ui.progress'), $button = $(this), updateEvent ; // 重置为零 clearInterval(window.fakeProgress) $progress.progress('reset'); // 每 10 毫秒更新一次，直到完成 window.fakeProgress = setInterval(function() { $progress.progress('increment'); $button.text( $progress.progress('get value') ); // 完成时停止递增 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 | 设置总值将使每次调用递增都更接近这个总值（例如 1/20、2/20 等等） |
| value | false | 设置当前值，当指定总值时，这将用于计算总值的比率，使用百分比，这应该是总百分比 |
回调函数
回调函数指定在特定行为之后要执行的函数。
| 参数 | 上下文 | 描述 | |
|---|---|---|---|
| onChange | percent, value, total | 进度条 | 百分比变化的回调函数 |
| onSuccess | total | 进度条 | 成功状态的回调函数 |
| onActive | value, total | 进度条 | 活动状态的回调函数 |
| onError | value, total | 进度条 | 错误状态的回调函数 |
| onWarning | value, total | 进度条 | 警告状态的回调函数 |
DOM 设置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 | 进度条 | 调试日志中使用的名称 |
| silent | False | 使所有控制台输出静音，包括错误消息，无论其他调试设置如何。 |
| debug | False | 向控制台提供标准调试输出 |
| performance | True | 向控制台提供标准调试输出 |
| verbose | True | 向控制台提供辅助调试输出 |
| errors |
error : { method : 'The method you called is not defined.', nonNumeric : 'Progress value is non numeric' }
|
|