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

The step-by-step guide spells out every click, with pictures. In short:

1. Click Build this progress bar above. It opens the step-by-step guide with the Progress bar design already picked.
2. In step 2, type your column’s name. If you like, change Green at and Yellow at: the percentages where the bar changes color.
3. No Number column yet? Step 3 shows exactly how to add one. It should hold a value from 0 to 100.
4. Click Copy my code.
5. In your list, click the name at the top of your column, then Column settings, then Format this column. At the bottom of the panel that opens, click Advanced mode.
6. Click inside the box, press Ctrl+A and then Delete to empty it, and press Ctrl+V to paste. Click Preview, then Save.

Common questions