Wednesday, December 21, 2011

Progress Bar for Tasks List in SharePoint 2010

Progress Bar for Tasks List in SharePoint 2010

Now we are going to see how to show the progress of tasks in SharePoint

We are going achieve this with the help of Calculated Columns.

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 1 :

=”<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>”

Progress Bar 3:

="<DIV style=’position:relative;padding-top:2px;
border:1px solid Gainsboro; background-color: "
&CHOOSE(RIGHT(LEFT(Priority,2),1), "LightSalmon", "LemonChiffon", "Chartreuse")&";’>
<DIV style=’margin:0;padding:0;font-size:0px;border-top:12px solid "
&CHOOSE(RIGHT(LEFT(Priority,2),1),"Crimson","orange","green")&"; width:"
&IF(Status="Not Started","1%",
IF(Status="Completed","100%",TEXT([% Complete],"0%")))&";’></DIV>
<DIV style=’position:absolute; top:2px;left:2px;’>"
&IF(Status="Not Started","0%",IF(Status="Completed","100%",TEXT([% Complete],"0%")))&"

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

Once you have done this, your tasks list looks like this

To achieve our expected result, we have to do one more thing

Add a HTML Form Web Part and enter the below script


<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");

<script type="text/javascript">

var tempDIV = document.createElement ("DIV"); = "pointer";
tempDIV.innerHTML = $(this).text();


Now your SharePoint List look like


It works now,  you can do many more things using jQuery and Calculated column.

If you are looking for other colors, here is a very good reference:

do let us know your experience with this post.


  1. I added the script in the HTML Form Web Part, but it is still only showing the html code instead of the actual progress bar. :(

  2. Me too, i can only see the code!

  3. Hi all,

    Create columns(Multiple lines of text) for progress bar and add the script to it..

  4. Check this video:

    1. its a help ful ...thanks a lot for sharing this link...

  5. progress bar 3 does not show the progress as expected but remains at 0. progress bar 2 works perfectly.
    any idea what i could be doing wrong with version 3

    1. Progress bar 3 is controlled by not only the percentage completed but the status itself as well

  6. I see the bar in the standard view but not the Datasheet view.

  7. My progress bar is running from right to left instead of left to right so it looks like progress would be 60% when it should be 40%. How do I fix this?

  8. I was trying to implement this on our Sharepoint, unfortunately it does not work.

    I guess the "jQPath="";" is not available anymore.

    Does anyone have any suggestions so I can still make this work?

    Many thanks,


    1. I would rather suggest you to download the jquery from and use it

  9. I am having the same issue as Samantha Sparks (July 24, 2013, post) where the progress bar is right justified instead of left justified. Any response?


How to launch a document by clicking a link to the file?

Word: <a href='ms-word:ofe|u|path/to/web/word/document.docx'>Link to document</a> Excel: <a href='ms-excel:o...