If you have a field, which you would like to show on the list or view page as a progress bar (e.g. Task Progress), you can use the Bootstrap progress bar class to create beautiful progress bars.
Progress bar with label (with minimum width):
http://getbootstrap.com/components/#progress-label
You can adapt to use whichever progress bar you like.
The label with minimum width progress bar is nice as it shows the numeric value even if it is a very low number.
In this example the progress bar field is called "TaskProgress":
Here is the code added to:
Server Events - Table-Specific- Common - Row_Rendered
// Row Rendered event
function Row_Rendered() {
// To view properties of field class, use:
//var_dump($this-><FieldName>);
//Progress Bar Start
$this->TaskProgress->ViewValue = "
<div class='progress'>
<div class='progress-bar progress-bar-success' role='progressbar' aria-valuenow='".$this->TaskProgress->ViewValue." aria-valuemin='0' aria-valuemax='100' style='min-width: 2em; width: ".$this->TaskProgress->ViewValue."%'>".$this->TaskProgress->ViewValue."%
</div></div></div>";
//Progress Bar End
}