Display status % as a Progress bar

JSLinkRenderPercentage.js

// List view, display, add and edit – Percent Complete Sample 
// Muawiyah Shannak , @MuShannak 
 
(function () { 
 
    // Create object that have the context information about the field that we want to change it's output render  
    var percentCompleteFiledContext = {}; 
    percentCompleteFiledContext.Templates = {}; 
    percentCompleteFiledContext.Templates.Fields = { 
        // Apply the new rendering for Status % field on List View and Display forms 
        "Status_x0020__x0025_": {  
            "View": percentCompleteViewFiledTemplate, 
            "DisplayForm": percentCompleteViewFiledTemplate 
        } 
    }; 
 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(percentCompleteFiledContext); 
 
})(); 
 
// This function provides the rendering logic for View and Display form 
function percentCompleteViewFiledTemplate(ctx) { 
 
    var percentComplete = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
	var percentCompleteFloat = parseFloat(percentComplete);
	if (percentCompleteFloat <= 30 )
	{
		return "<div style='background-color: #e5e5e5; width: 100px;  display:inline-block;'><div style='width: " + percentComplete.replace(/\s+/g, '') + "; background-color: #d11141;'>&nbsp;</div></div>&nbsp;" + percentComplete; 
	}
	else if (percentCompleteFloat > 30 && percentCompleteFloat <= 70)
	{
		return "<div style='background-color: #e5e5e5; width: 100px;  display:inline-block;'><div style='width: " + percentComplete.replace(/\s+/g, '') + "; background-color: #f37735;'>&nbsp;</div></div>&nbsp;" + percentComplete; 
	}
	else if (percentCompleteFloat > 70 && percentCompleteFloat <= 99)
	{
		return "<div style='background-color: #e5e5e5; width: 100px;  display:inline-block;'><div style='width: " + percentComplete.replace(/\s+/g, '') + "; background-color: #ffc425;'>&nbsp;</div></div>&nbsp;" + percentComplete; 
	}
	else
	{
		return "<div style='background-color: #e5e5e5; width: 100px;  display:inline-block;'><div style='width: " + percentComplete.replace(/\s+/g, '') + "; background-color: #00b159;'>&nbsp;</div></div>&nbsp;" + percentComplete; 
	}
}