Create Progress Bar for "% Complete" Column with JS Link in SharePoint 2013

SharePoint 2013 introduced a new feature "JS Link Property" with which user can Control Rendering of Fields, Items, and WebParts using JavaScript.

The example I'am going to explain here is how to render completed percentage field of list as a progress bar.

List View before using JSLink:

Now create a new JavaScript file and provide name as "Percent_Complete_Progressbar.js".
Copy the below code and paste it in JavaScript file (Percent_Complete_Progressbar.js) you have created.

 var listView = listView || {};  
 listView.RenderFields = function () {  
  // Intialize the variables for overrides objects  
  var overrideCtx = {  
   Templates: {  
    Fields: {  
       //PercentComplete is internal name of field which you want to render as progressbar.  
     'PercentComplete': {   
      'View' : listView.CreatePercentCompleteProgressbar  
     }  
    }  
   }  
  };  
  // Register the override of the field  
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
 }  
 listView.CreatePercentCompleteProgressbar = function (ctx) {  
  var output = [];  
   output.push('<div style="background: #999999; display:block; height: 20px; width: 100px;">');  
   output.push('<span style="color: #fff; position:absolute; text-align: center; width: 100px;">');  
   output.push(ctx.CurrentItem.PercentComplete);  
   output.push('</span>');  
   output.push('<div style="background: #3D7FF2; height: 100%; width: ');  
   output.push(ctx.CurrentItem.PercentComplete.replace(" %", ""));  
   output.push('%;"></div></div>');  
   return output.join('');  
 }  
 listView.RenderFields();  

Replace the "PercentComplete" everywhere in code with internal name of field which you want to render as progressbar.

Now save and upload the script file in Master Page Gallery of your SharePoint site as JavaScript Display Template content type use below parameters for required Metadata fields :

Target Control Type: View
Standalone: Override
Target Scope: /sites/yoursitename

After completing the upload, navigate to List View where you want to use this rendering.Edit the page and then go to Miscellaneous under webpart properties by editing the webpart.

In JSLink property provide the URL to the file using below pattern:

If List View is under
subsite: ~site/_catalogs/masterpage/Percent_Complete_Progressbar.js
site-collection: ~sitecollection/_catalogs/masterpage/Percent_Complete_Progressbar.js

Apply the webpart changes and stop editing the page.

Do a refresh (Ctrl+F5), It's done

Note: Perform below actions if you want to render the progressbar in each view of the list.
         * Click on the View, put the page in edit mode then edit the webpart.
         * Add the URL (~sitecollection/_catalogs/masterpage/Percent_Complete_Progressbar.js) in                   JSLink Property under Miscellaneous tab.

Enjoy..!