Add the following code as an in-line snippet named “ProgressBar”:

var $ = skuid&#46;$, field = argumentse0], value = argumentse1], element = $('<div>')&#46;appendTo(field&#46;element); element &#46;css({ 'position' : 'relative' }) &#46;progressbar({value:value}); &#47;&#47; Label $('<div>') &#46;addClass( 'progress-label' ) &#46;css({ &#47;&#47; It would be better to store this &#47;&#47; CSS in a proper stylesheet 'position' : 'absolute', 'top' : '0', 'left' : '0', 'width' : '100%', 'height' : '100%', 'text-align' : 'center' }) &#46;text( $&#46;number(value,1) + '%' ) &#46;appendTo(element);

Next, change the field Field Renderer to “Custom” and the snippet name to “ProgressBar”

You should get something like the following:

Note that this makes use of jQuery UI’s progress bar, so there are a lot more options you can take advantage of. See the jQuery UI documentation for more information:

http://jqueryui.com/progressbar/

Any way to possibly use this in a template component that has a UI-only field on an aggregate model?

Indicator I would like to convert to a progress bar

HTML in Template component:

This doesn’t seem to work anymore. Any ideas why?

Jack,

This isn’t an answer to your question, but you can also use the ‘Progress’ tag in a template component.

Progress

Sample page:

Bill that’s amazing! I had no idea. So simple. Thanks!

Awesome Bill! For some Friday afternoon funsies, I created this little thing…