SharePoint progress bar column formatting

Turn a plain number into a color-coded percentage bar, so people can see how far along something is without reading the raw value.

A SharePoint or Microsoft Lists Number column normally shows a bare number: 68. With a small piece of column formatting JSON, you can render it as a filled bar instead — useful for percent-complete tracking, budget usage, capacity, or any metric with a clear min and max.

Before and after

What the SharePoint progress bar JSON looks like

The generator produces JSON like the example below. An outer div acts as the track, and an inner div's width is calculated from the field's value as a percentage of your chosen max:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": { "background-color": "#edebe9", "border-radius": "6px", "overflow": "hidden", "width": "140px" },
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "=(([$Progress] > 100 ? 100 : [$Progress]) + '%')",
        "background-color": "=if([$Progress] >= 70, '#107c10', if([$Progress] >= 40, '#d29200', '#d13438'))",
        "height": "16px"
      }
    }
  ]
}

This is standard SharePoint progress bar JSON: a track div containing a fill div whose width is an expression, not a fixed value. The generator computes that expression and the color thresholds for you.

How to apply it

1. Open the generator and pick the Progress Bar template (or use the button above).
2. Enter your column's internal field name — see the note below.
3. Set the min/max range and threshold colors to match your data.
4. Click Copy.
5. In SharePoint: Column settings → Format this column → Advanced mode.
6. Delete what's in the box, paste, click Preview, then Save.

Common questions