When one of us at Isotope11 runs across something interesting or useful on the internet, we’ll send the link to all the other devs. Over the recent holiday, Josh sent a link to another Josh and his new fancy CSS3 Progress Bars. I had an immediate need for something like this in a Rails project, so I wrote some helper methods to generate the HTML with some simple options.

I created a gem, css3-progress-bar-rails that can be dropped into a Rails 3.1+ project to utilize these status bars. To install, add ‘css3-progress-bar-rails’ to your Gemfile, and add require ‘css3-progress-bar’ into your application.css, so that the CSS is picked up by the Rails asset pipeline.

Examples

<%= progress_bar(55) %>  



<%= progress_bar(33, :color => 'blue', :rounded => true) %>  



<%= progress_bar(83, :color => 'orange', :rounded => true, :tiny => true) %>   



<%= combo_progress_bar([19, 9, 20, 10]) %>   



<%= combo_progress_bar([12, 15, 18, 22, 10], :tiny => true) %>