How to create custom progress bar in SharePoint list column?

Step 1:

1. Create list with my "progressBarList "
2. Create column with name Progressbar ,column type number

Step 2:

                Create calculate column with name "CustomProgressBar "

                Set in formula:  ="---"&[Progressbar]

Step 3:

1. Edit list page
2. Add form web part to this page
3. Put the code below in form web part source or download from here

  

<script>

// run on tr with class '.ms-vb2; in '.ms-listviewtable' class

$(".ms-listviewtable tr .ms-vb2").each(function(){

//chack if current td innet text contain custom value like '---'

if($(this).text().indexOf("---")!=-1)

{

// split by uniq value '---'

var temp=$(this).text().split("---");

 

 //temp[1] contain the value

               

                //set background color green if value is grther then 65

                if(temp[1]>65){

                                $(this).html('<div style="color:#ffffff;background-color:#2e983d;width:'+temp[1]+'px; padding-top:3px; text-align: center;"><b>'+parseInt(temp[1])+'%</b></div>')

                                }

                //set background color yellow if value is between 33 until 65 

                if(temp[1]>=33&&temp[1]<=65){

                                $(this).html('<div style="color:#ffffff;background-color:#fecf3c;width:'+temp[1]+'px; padding-top:3px; text-align: center;"><b>'+parseInt(temp[1])+'%</b></div>')

                                }

                //set background color red if value is between 0 until 33  

                if(temp[1]<33&&temp[1]>0){

                                $(this).html('<div style="color:#ffffff;background-color:#ee421b;width:'+temp[1]+'px; padding-top:3px; text-align: center;"><b color="white">'+parseInt(temp[1])+'%</b></div>')

                                }

                                // set 'No Tasks' if is blank

                                if(temp[1]=="")

                                $(this).html('<div>No Tasks</div>')

}

});

</script>

Result:

Do you like this post?>
Buy me a cup of coffe to show your appreciation!