Thursday, July 23, 2009

CSS Progress Bar for Ruby on Rails App

Today, I spent sometime working on my TODO application and found that I need a progress bar to show the status of completion.

However, I don't find any helpful source so I decided to invent my own wheels. It turns out that pure CSS progress bar is easy to implement. So I wrote a application helper method for my view.


# Progress Bar Helper
 # Paramemters
 # progress - integer value between 0 - 100 indicating progress percentage
 # options available:
 # :width - bar width, default to 500px
 # :height - bar height, default to 20px
 # :text - Show text in progress bar, which will also increase the bar height if less than 20px
 # :text_color - Set the text color shown in progress bar
 # :bg_color - background color of the progress bar
 # :bar_color - progress bar color

 def progress_bar(progress,options={})
   width = options[:width] || 500
   height = options[:height] || 20
   bg_color=options[:bg_color] || "#DDD"
   bar_color=options[:bar_color] || "#6A5ACD"
   text = options[:text]
   if text
     height = 20 unless height>=20
     text_color = options[:text_color] || "white"     
     text_content = content_tag(:span,text,:style=>"margin-right: 3px; color: #{text_color};")
   end     
   style1 = "width: #{width}px; background: #{bg_color}; border: 1px solid black; height: #{height}px;"
   style2 = "text-align: right; float: left; background: #{bar_color}; width: #{progress*width/100}px; height: #{height}px"
   content_tag(:div, content_tag(:div,text_content,:style=>style2),:style=>style1)
 end


No comments :

Post a Comment