diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index ce4672876..ddaeb0536 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1445,6 +1445,34 @@ module ApplicationHelper
       content_tag('p', legend, :class => 'percent').html_safe
   end
 
+
+  def bar_graph(pcts, options={})
+    pcts = [pcts] unless pcts.is_a?(Array)
+    case pcts[0]
+    when Integer, Float
+      pcts = pcts.sort.reverse
+      bar = content_tag :div, :class => "bar-graph" do
+        content = pcts.each_with_index.collect do |p, index|
+          content_tag( 'span', '',
+                      :style => "width: #{p}%",
+                      :title => "#{p.floor}%" )
+        end.join.html_safe
+      end
+    when Hash
+      pcts = pcts.sort_by{ |k| k[:pcts] }.reverse
+      bar = content_tag :div, :class => "bar-graph" do
+        content = pcts.each_with_index.collect do |p, index|
+          concat content_tag( 'span', '',
+                             :style => "width: #{p[:pcts].floor}%",
+                             :title => "#{p[:label] || ''}: #{p[:pcts].floor}%" )
+        end.join.html_safe
+      end
+    end
+    legend = content_tag( 'p', options[:legend] || '', :class => 'legend' ).html_safe
+    content_tag( 'div', bar + legend, :class => "#{options[:class] || ''}" )
+  end
+
+
   def checked_image(checked=true)
     if checked
       @checked_image_tag ||= content_tag(:span, nil, :class => 'icon-only icon-checked')
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index deb5b7518..201fb8e54 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -117,7 +117,7 @@ module IssuesHelper
              content_tag('td', link_to_issue(child, :project => (issue.project_id != child.project_id)), :class => 'subject', :style => 'width: 50%') +
              content_tag('td', h(child.status), :class => 'status') +
              content_tag('td', link_to_user(child.assigned_to), :class => 'assigned_to') +
-             content_tag('td', child.disabled_core_fields.include?('done_ratio') ? '' : progress_bar(child.done_ratio), :class=> 'done_ratio') +
+             content_tag('td', child.disabled_core_fields.include?('done_ratio') ? '' : bar_graph(child.done_ratio, :class => 'progress-bar'), :class=> 'done_ratio') +
              content_tag('td', buttons, :class => 'buttons'),
              :class => css)
     end
@@ -154,7 +154,7 @@ module IssuesHelper
              content_tag('td', other_issue.status, :class => 'status') +
              content_tag('td', format_date(other_issue.start_date), :class => 'start_date') +
              content_tag('td', format_date(other_issue.due_date), :class => 'due_date') +
-             content_tag('td', other_issue.disabled_core_fields.include?('done_ratio') ? '' : progress_bar(other_issue.done_ratio), :class=> 'done_ratio') +
+             content_tag('td', other_issue.disabled_core_fields.include?('done_ratio') ? '' : bar_graph(other_issue.done_ratio, :class => 'progress-bar'), :class=> 'done_ratio') +
              content_tag('td', buttons, :class => 'buttons'),
              :id => "relation-#{relation.id}",
              :class => css)
diff --git a/app/helpers/queries_helper.rb b/app/helpers/queries_helper.rb
index 55b7d5812..043356f17 100644
--- a/app/helpers/queries_helper.rb
+++ b/app/helpers/queries_helper.rb
@@ -223,7 +223,7 @@ module QueriesHelper
     when :last_notes
       item.last_notes.present? ? content_tag('div', textilizable(item, :last_notes), :class => "wiki") : ''
     when :done_ratio
-      progress_bar(value)
+      bar_graph(value, :class => 'progress-bar')
     when :relations
       content_tag('span',
         value.to_s(item) {|other| link_to_issue(other, :subject => false, :tracker => false)}.html_safe,
diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb
index 7c180a4d3..04b7394b9 100644
--- a/app/views/issues/show.html.erb
+++ b/app/views/issues/show.html.erb
@@ -62,7 +62,7 @@
     rows.right l(:field_due_date), issue_due_date_details(@issue), :class => 'due-date'
   end
   unless @issue.disabled_core_fields.include?('done_ratio')
-    rows.right l(:field_done_ratio), progress_bar(@issue.done_ratio, :legend => "#{@issue.done_ratio}%"), :class => 'progress'
+    rows.right l(:field_done_ratio), bar_graph(@issue.done_ratio, :legend => "#{@issue.done_ratio}%", :class => 'progress-bar'), :class => 'progress'
   end
   unless @issue.disabled_core_fields.include?('estimated_hours')
     rows.right l(:field_estimated_hours), issue_estimated_hours_details(@issue), :class => 'estimated-hours'
diff --git a/app/views/versions/_issue_counts.html.erb b/app/views/versions/_issue_counts.html.erb
index 398b2d31f..5ddf05a98 100644
--- a/app/views/versions/_issue_counts.html.erb
+++ b/app/views/versions/_issue_counts.html.erb
@@ -21,8 +21,8 @@
           <% end %>
         </td>
         <td style="width:240px;">
-            <%= progress_bar((count[:closed].to_f / count[:total])*100,
-                  :legend => "#{count[:closed]}/#{count[:total]}") %>
+            <%= bar_graph((count[:closed].to_f / count[:total])*100,
+                  :legend => "#{count[:closed]}/#{count[:total]}", :class => 'progress-bar') %>
         </td>
     </tr>
     <% end %>
diff --git a/app/views/versions/_overview.html.erb b/app/views/versions/_overview.html.erb
index 48c6b5972..470ab8116 100644
--- a/app/views/versions/_overview.html.erb
+++ b/app/views/versions/_overview.html.erb
@@ -15,11 +15,12 @@
 <% end %>
 
 <% if version.visible_fixed_issues.count > 0 %>
-    <%= progress_bar([version.visible_fixed_issues.closed_percent, version.visible_fixed_issues.completed_percent],
-                     :titles =>
-                       ["%s: %i%%" % [l(:label_closed_issues_plural), version.visible_fixed_issues.closed_percent],
-                        "%s: %i%%" % [l(:field_done_ratio), version.visible_fixed_issues.completed_percent]],
-                     :legend => ('%i%%' % version.visible_fixed_issues.completed_percent)) %>
+    <%= bar_graph([
+      {:pcts => version.visible_fixed_issues.closed_percent, :label => l(:label_closed_issues_plural)},
+      {:pcts => version.visible_fixed_issues.completed_percent, :label => l(:field_done_ratio)}
+    ],
+    :legend => ('%i%%' % version.visible_fixed_issues.completed_percent), :class => 'progress-bar') %>
+
     <p class="progress-info">
       <%= link_to(l(:label_x_issues, :count => version.visible_fixed_issues.count),
                   version_filtered_issues_path(version, :status_id => '*')) %>
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index edf96d4fe..101a2955c 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -1069,6 +1069,24 @@ img.ui-datepicker-trigger {
 }
 
 /***** Progress bar *****/
+@keyframes graph {
+  0% { transform: scaleX(0); transform-origin: 0;}
+  100% { transform: scaleX(1); transform-origin: 0;}
+}
+
+#relations .progress-bar { min-width: 100px; max-width: 150px; }
+.version-overview .progress-bar { width: 30vw }
+.attributes .progress-bar { width: 35%; height: 1em; }
+.done-ratio .label { display: none; margin: 0; }
+.progress-bar { display: flex; align-items: center; min-width: 50px; }
+.progress-bar .legend { margin-left: 6px; }
+.bar-graph { flex: 1 0 auto; position: relative; height: 7px; background: #ccc; }
+.bar-graph span { transform: scaleX(0); animation: graph 500ms ease 100ms 1 forwards; height: inherit; position: absolute; top: 0; left: 0; transition: opacity 300ms ease; opacity: 1; }
+.bar-graph span:nth-child(1) { background: #628db6; }
+.bar-graph span:nth-child(2) { background: #3e5b76; }
+.bar-graph span:nth-child(3) { background: #303030; }
+.bar-graph:hover span:not(:hover) { opacity: 0.3; }
+
 table.progress {
   border-collapse: collapse;
   border-spacing: 0pt;