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