Types
+
-
-
Progress Bar
-A standard progress bar
-
-
-
Content
+Content
-
-
Bar
-A progress element can contain a bar to indicate the current level of progress
-
-
+
-
+
- Bar
+A progress element can contain a bar to indicate the current level of progress
+
+
+
-
Current Progress
-A progress bar can contain a reading of the current progress
-
-
-
-
Label
-A progress element can contain a label
-
-
-
States
+States
-
-
Active
-A progress bar can show activity
-
-
-
-
Successful
-A progress bar can show success
-
-
+
-
+
- Success
+A progress bar can show a success state
+
+
+
Everything worked, your file is all ready.
+
-
Warning
-A progress bar can show a warning state
-
-
+
-
+
- Warning
+A progress bar can show a warning state
+
+
+
Your file didn't meet the minimum resolution requirements.
+
-
Failed
-A progress bar can show failure
-
-
+
-
+
- Error
+A progress bar can show an error state
+
+
+
There was an error.
+
-
Disabled
-A progress bar can be disabled
-
-
+
-
+
- Disabled
+A progress bar can be disabled
+
+
+
Variations
+Variations
-
-
Attached
-A progress bar can show progress of an element
-
-
-
-
-
La la la la
+
+
- Attached
+A progress bar can show progress of an element
+
+
+
+
+
+ La la la la
+
+
+
-
+
+
+
+
+
+
Color
+Can have different colors:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
Color
-Can have different colors:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Initializing a progress bar
+ +
+
- With metadata
+A progress bar can be initialized with its
+
+ $('#example1').progress();
+
+
+
+
+
+ Creating Profile
+
-
+
+
- With javascript
+A progress bar can be initialized with its
+
+ $('#example2').progress({
+ percent: 22
+ });
+
+
+
+
+
+ Creating Profile
+
-
+
+
- Task Completion Percent
+ +
+
- Adding a total value
+A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.
+Each call to increment will increase the value by 1, or the value specified as the second parameter
+
+ $('#example3')
+ .progress('increment')
+ ;
+
+
+
+
+
+
+ Adding Photos
+
+ $('#example3')
+ .progress({
+ total: 3
+ })
+ ;
+
-
Striped
-A progress bar can be striped
-
-
+
-
+
- Initializing with metadata and using custom labels
+A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.
+Each call to increment will increase the value by 1, or the value specified as the second parameter
+In addition you can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state
+
+ $('#example4')
+ .progress('increment')
+ ;
+
+
+
+
+
+
+ Adding Photos
+
+ $('#example4')
+ .progress({
+ text: {
+ active : 'Adding {value} of {total} photos',
+ success : '{total} Photos Uploaded!'
+ }
+ })
+ ;
+
-
\ No newline at end of file
diff --git a/server/files/javascript/progress.js b/server/files/javascript/progress.js
new file mode 100755
index 000000000..36c280ef6
--- /dev/null
+++ b/server/files/javascript/progress.js
@@ -0,0 +1,35 @@
+semantic.progress = {};
+
+// ready event
+semantic.progress.ready = function() {
+
+ var
+ $progress = $('.ui.progress').not('.success, .error, .warning'),
+ $stateProgress = $('.ui.success.progress, .ui.warning.progress, .ui.error.progress')
+ ;
+
+ setTimeout(function() {
+
+ $progress
+ .progress({
+ random: {
+ min: 10,
+ max: 90
+ }
+ })
+ .progress('increment')
+ ;
+
+ $stateProgress
+ .progress('set progress', 100)
+ ;
+
+ }, 300);
+
+};
+
+
+// attach ready event
+$(document)
+ .ready(semantic.progress.ready)
+;
\ No newline at end of file
diff --git a/src/definitions/behaviors/state.js b/src/definitions/behaviors/state.js
index 675e2f188..b32727b46 100755
--- a/src/definitions/behaviors/state.js
+++ b/src/definitions/behaviors/state.js
@@ -126,6 +126,12 @@ $.fn.state = function(parameters) {
inactive: function() {
return !( $module.hasClass(className.active) );
},
+ state: function(state) {
+ if(className[state] === undefined) {
+ return false;
+ }
+ return $module.hasClass( className[state] );
+ },
enabled: function() {
return !( $module.is(settings.filter.active) );
@@ -143,6 +149,9 @@ $.fn.state = function(parameters) {
},
input: function() {
return $module.is('input');
+ },
+ progress: function() {
+ return $module.is('.ui.progress');
}
},
@@ -631,7 +640,10 @@ $.fn.state.settings = {
className: {
active : 'active',
disabled : 'disabled',
- loading : 'loading'
+ error : 'error',
+ loading : 'loading',
+ success : 'success',
+ warning : 'warning'
},
selector: {
@@ -648,14 +660,23 @@ $.fn.state.settings = {
button: {
disabled : true,
loading : true,
- active : true
+ active : true,
+ },
+ progress: {
+ active : true,
+ success : true,
+ warning : true,
+ error : true
}
},
states : {
- disabled: true,
- loading : true,
- active : true
+ active : true,
+ disabled : true,
+ error : true,
+ loading : true,
+ success : true,
+ warning : true
},
text : {
diff --git a/src/definitions/modules/progress.js b/src/definitions/modules/progress.js
index eca6dd15d..c8ed08f89 100755
--- a/src/definitions/modules/progress.js
+++ b/src/definitions/modules/progress.js
@@ -48,6 +48,7 @@ $.fn.progress = function(parameters) {
$module = $(this),
$bar = $(this).find(selector.bar),
$progress = $(this).find(selector.progress),
+ $label = $(this).find(selector.label),
element = this,
instance = $module.data(moduleNamespace),
@@ -71,6 +72,20 @@ $.fn.progress = function(parameters) {
;
},
+ destroy: function() {
+ module.verbose('Destroying previous dropdown for', $module);
+ $module
+ .removeData(moduleNamespace)
+ ;
+ instance = undefined;
+ },
+
+ complete: function() {
+ if(module.percent === undefined || module.percent < 100) {
+ module.set.percent(100);
+ }
+ },
+
read: {
metadata: function() {
if( $module.data(metadata.percent) ) {
@@ -106,7 +121,7 @@ $.fn.progress = function(parameters) {
incrementValue = incrementValue || 1;
newValue = startValue + incrementValue;
edgeValue = module.total;
- module.debug('Incrementing completed by value', incrementValue, startValue, edgeValue);
+ module.debug('Incrementing value by', incrementValue, startValue, edgeValue);
if(newValue > edgeValue ) {
module.debug('Value cannot decrement above total', edgeValue);
newValue = edgeValue;
@@ -136,7 +151,7 @@ $.fn.progress = function(parameters) {
startValue = module.value || 0;
decrementValue = -decrementValue || -1;
newValue = startValue + decrementValue;
- module.debug('Decrementing completed by value', decrementValue, startValue);
+ module.debug('Decrementing value by', decrementValue, startValue);
if(newValue > module.total ) {
newValue = module.total;
}
@@ -152,6 +167,21 @@ $.fn.progress = function(parameters) {
},
get: {
+ text: function(templateText) {
+ var
+ value = module.value || 0,
+ total = module.total || 0,
+ percent = module.percent || 0
+ ;
+ templateText = templateText || '';
+ templateText = templateText
+ .replace('{value}', value)
+ .replace('{total}', total)
+ .replace('{percent}', percent)
+ ;
+ module.debug('Adding variables to progress bar text', templateText);
+ return templateText;
+ },
randomValue: function() {
module.debug('Generating random increment percentage');
return Math.floor((Math.random() * settings.random.max) + settings.random.min);
@@ -168,8 +198,10 @@ $.fn.progress = function(parameters) {
},
set: {
- complete: function() {
- module.set.percent(100);
+ barWidth: function(value) {
+ $bar
+ .css('width', value + '%')
+ ;
},
initials: function() {
if(settings.value) {
@@ -184,21 +216,91 @@ $.fn.progress = function(parameters) {
module.verbose('Current percent set in settings', settings.percent);
module.percent = settings.percent;
}
+ if(module.percent) {
+ module.set.percent(module.percent);
+ }
+ else if(module.value) {
+ module.set.progress(module.value);
+ }
},
- percent: function(value) {
- value = (typeof value == 'string')
- ? +(value.replace('%', ''))
- : value
+ percent: function(percent) {
+ percent = (typeof percent == 'string')
+ ? +(percent.replace('%', ''))
+ : percent
;
- console.log(value);
- if(value > 0 && value < 1) {
+ if(percent > 0 && percent < 1) {
module.verbose('Module percentage passed as decimal, converting');
- value = value * 100;
+ percent = percent * 100;
+ }
+ // round percentage
+ if(settings.precision === 0) {
+ percent = Math.round(percent);
+ }
+ else {
+ percent = Math.round(percent * (10 * settings.precision) / (10 * settings.precision) );
+ }
+ module.percent = percent;
+ if(module.total) {
+ module.value = Math.round( (percent / 100) * module.total);
+ }
+ module.set.barWidth(percent);
+ module.set.barLabel();
+ if(percent === 100 && settings.autoSuccess) {
+ module.debug('Automatically triggering success at 100%');
+ module.set.success();
+ }
+ else if(settings.text.active) {
+ module.set.label(settings.text.active);
+ }
+ $.proxy(settings.onChange, element)(percent, module.value, module.total);
+ },
+ label: function(text) {
+ text = text || '';
+ if(text) {
+ text = module.get.text(text);
+ module.debug('Setting label to text', text);
+ $label.text(text);
+ }
+ },
+ barLabel: function(text) {
+ if(text !== undefined) {
+ $progress.text( module.get.text(text) );
+ }
+ else if(settings.label == 'ratio' && module.total) {
+ module.debug('Adding ratio to bar label');
+ $progress.text( module.get.text(settings.text.ratio) );
+ }
+ else if(settings.label == 'percent') {
+ module.debug('Adding percentage to bar label');
+ $progress.text( module.get.text(settings.text.percent) );
+ }
+ },
+ success : function(text) {
+ text = text || settings.text.success;
+ module.debug('Setting success state');
+ $module.addClass(className.success);
+ module.complete();
+ if(text) {
+ module.set.label(text);
+ }
+ },
+ warning : function(text) {
+ text = text || settings.text.warning;
+ module.debug('Setting warning state');
+ $module.addClass(className.warning);
+ module.complete();
+ if(text) {
+ module.set.label(text);
+ }
+ },
+ error : function(text) {
+ text = text || settings.text.error;
+ module.debug('Setting error state');
+ $module.addClass(className.error);
+ module.complete();
+ if(text) {
+ module.set.label(text);
}
- module.percent = value;
- $bar
- .css('width', value + '%')
- ;
},
total: function(totalValue) {
module.total = totalValue;
@@ -217,7 +319,7 @@ $.fn.progress = function(parameters) {
}
if(module.total) {
module.value = numericValue;
- percentComplete = (numericValue / module.total);
+ percentComplete = (numericValue / module.total) * 100;
module.debug('Calculating percent complete from total', percentComplete);
module.set.percent( percentComplete );
}
@@ -411,26 +513,32 @@ $.fn.progress.settings = {
name : 'Progress',
namespace : 'progress',
- debug : true,
+ debug : false,
verbose : true,
performance : true,
- random : {
- min: 1,
- max: 3
+ random : {
+ min : 1,
+ max : 3
},
label : 'percent',
+ autoSuccess : true,
+ precision : 1,
percent : false,
total : false,
value : false,
- onChange : function(value){},
+ onChange : function(percent, value, total){},
- error : {
- method : 'The method you called is not defined.',
- nonNumeric : 'Progress value is non numeric'
+ error : {
+ method : 'The method you called is not defined.',
+ nonNumeric : 'Progress value is non numeric'
+ },
+
+ regExp: {
+ variable: /\{\$*[A-z0-9]+\}/g
},
metadata: {
@@ -439,12 +547,26 @@ $.fn.progress.settings = {
value : 'value'
},
+
selector : {
bar : '> .bar',
+ label : '> .label',
progress : '.bar > .progress'
},
+ text : {
+ active : false,
+ error : false,
+ success : false,
+ warning : false,
+ percent : '{percent}%',
+ ratio : '{value} of {total}'
+ },
+
className : {
+ error : 'error',
+ success : 'success',
+ warning : 'warning'
}
};
diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less
index 95a98ba27..8e384c2d2 100755
--- a/src/definitions/modules/progress.less
+++ b/src/definitions/modules/progress.less
@@ -67,6 +67,7 @@
/* Percent Complete */
.ui.progress .bar > .progress {
+ white-space: nowrap;
position: absolute;
width: @progressWidth;
font-size: @progressSize;
@@ -77,6 +78,7 @@
color: @progressColor;
text-shadow: @progressTextShadow;
margin-top: @progressOffset;
+ font-weight: @progressFontWeight;
text-align: @progressTextAlign;
}
@@ -90,9 +92,11 @@
left: @labelLeft;
bottom: @labelBottom;
color: @labelColor;
+ font-weight: @labelFontWeight;
text-shadow: @labelTextShadow;
margin-top: @labelOffset;
text-align: @labelTextAlign;
+ transition: @labelTransition;
}
@@ -102,40 +106,49 @@
/*--------------
- Successful
+ Success
---------------*/
-.ui.successful.progress .bar {
+.ui.progress.success .bar {
background-color: @successColor !important;
}
-.ui.successful.progress .bar,
-.ui.successful.progress .bar::after {
+.ui.progress.success .bar,
+.ui.progress.success .bar::after {
animation: none !important;
}
+.ui.progress.success > .label {
+ color: @successHeaderColor;
+}
/*--------------
Warning
---------------*/
-.ui.warning.progress .bar {
+.ui.progress.warning .bar {
background-color: @warningColor !important;
}
-.ui.warning.progress .bar,
-.ui.warning.progress .bar::after {
+.ui.progress.warning .bar,
+.ui.progress.warning .bar::after {
animation: none !important;
}
+.ui.progress.warning > .label {
+ color: @warningHeaderColor;
+}
/*--------------
- Failed
+ Error
---------------*/
-.ui.failed.progress .bar {
+.ui.progress.error .bar {
background-color: @errorColor !important;
}
-.ui.failed.progress .bar,
-.ui.failed.progress .bar::after {
+.ui.progress.error .bar,
+.ui.progress.error .bar::after {
animation: none !important;
}
+.ui.progress.error > .label {
+ color: @errorHeaderColor;
+}
/*--------------
Active
diff --git a/src/themes/packages/default/modules/progress.variables b/src/themes/packages/default/modules/progress.variables
index 17a0fefa0..ade621413 100755
--- a/src/themes/packages/default/modules/progress.variables
+++ b/src/themes/packages/default/modules/progress.variables
@@ -24,8 +24,8 @@
@barBackground: #888888;
@barBorderRadius: @borderRadius;
@barTransition:
- width 0.3s ease-in-out,
- background-color 1s ease-out
+ width 0.5s @defaultEasing,
+ background-color 1s @defaultEasing
;
@@ -39,6 +39,7 @@
@progressOffset: -0.5em;
@progressColor: @invertedLightTextColor;
@progressTextShadow: none;
+@progressFontWeight: bold;
@progressTextAlign: left;
@labelWidth: 100%;
@@ -52,7 +53,9 @@
@labelOffset: 0em;
@labelColor: @textColor;
@labelTextShadow: none;
+@labelFontWeight: bold;
@labelTextAlign: center;
+@labelTransition: color 1s @defaultEasing;
/*-------------------
States
-
+
+
+
+
Alternate bar labels
+Progress bar labels can be set to either a percentage or ratio with percentage being the default state. If you need to translate a progress bar label simply pass in a new templated value as the accompanying text.
+The following example shows how to localize for Spanish.
+
+ $('#example5')
+ .progress('increment')
+ ;
+
+
+
+
+
+
+ Carga de archivos
+
+ $('#example5')
+ .progress({
+ label: 'ratio',
+ text: {
+ ratio: '{value} de {total}'
+ }
+ })
+ ;
+