Today, let’s see how to show the progress of your tasks in SharePoint:

 

We’ll rely on this method: using calculated columns to write HTML. Easy, and entirely done through the SharePoint UI.

The [% Complete] is a default column in tasks lists. We just need to add – in a calculated column - the formulas for this specific use case. Here they are:

- Progress Bar:
=”<DIV style=’background-color:blue; width:”&([% Complete]*100)&”%;’>&nbsp;</DIV>”

- Progress Bar 2:
=”<DIV style=’background-color:red;’><DIV style=’background-color:LimeGreen; width:”&([% Complete]*100)&”%;’>&nbsp;</DIV></DIV>”

Note: the &nbsp; character is mandatory to make this work in Firefox.

If you are looking for other colors, here is a very good reference:
http://www.w3schools.com/html/html_colornames.asp