Skip to main content

Percent Progress Bar (Column Formatting)

The Percent Progress Bar turns a plain number column into an at-a-glance horizontal bar, so anyone scanning a SharePoint list can see how far along each item is without reading the figure. It is built with a standard Microsoft List and a small piece of column-formatting JSON. The bar fills to match the percentage, shifts color as work advances (amber, then blue, then green at 100%), and falls back cleanly when a value is blank. It is the fastest way to make any percent-complete field readable across projects, training, budgets, and checklists.
Author
SharePoint Maven
Built with
Features
Choice Column, Date and Time Column, JSON, Number Column, Person or Group Column, Single Line of Text Column
Category
Formatting

Want one like this?

Talk to Greg

Overview

  • A horizontal progress bar rendered directly inside the % Complete column of a standard SharePoint or Microsoft list
  • The bar width matches the stored value, so a single glance shows how far along each item is
  • Color shifts with progress – amber under 50%, blue from 50 to 99%, and green at 100%
  • A percentage label sits beside the bar for an exact read when it is needed
  • Values above 100 or below 0 are clamped, and blank cells fall back to 0% so the list never looks broken
  • Applied as column-formatting JSON, so it travels with the view and can be reused on any list with a number field

Common Use Cases

  • Percent complete on project tasks
  • Training completion per employee
  • Budget spent vs allocated
  • Onboarding checklist progress
  • Fundraising goal progress
  • Milestone tracking

How to Apply JSON Formatting

Note – the bar uses the current column (@currentField), so you apply it directly to your Number column and the column name does not need to match anything. It only needs to store a value from 0 to 100.

1. Create a list with the following columns:
[Title] Single line of text
[% Complete] Number (0 to 100)
[Status] Choice
[Assigned To] Person
[Due Date] Date

2. Populate the list with data.

3. On the % Complete column, open the column header menu, choose Column settings, then Format this column.

4. Switch to Advanced mode, paste the JSON below, and click Save.

JSON Code – Select, Copy and Paste

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "row",
    "align-items": "center",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "flex-grow": "1",
        "height": "14px",
        "border-radius": "7px",
        "background-color": "#edebe9",
        "overflow": "hidden",
        "box-sizing": "border-box"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "height": "14px",
            "border-radius": "7px",
            "width": "=if(@currentField == '', '0', if(Number(@currentField) > 100, '100', if(Number(@currentField) < 0, '0', Number(@currentField)))) + '%'",
            "background-color": "=if(@currentField == '', '#edebe9', if(Number(@currentField) >= 100, '#107c10', if(Number(@currentField) >= 50, '#0078d4', '#ffaa44')))"
          }
        }
      ]
    },
    {
      "elmType": "span",
      "style": {
        "margin-left": "8px",
        "min-width": "36px",
        "text-align": "right",
        "font-size": "12px",
        "color": "#605e5c"
      },
      "txtContent": "=if(@currentField == '', '0', if(Number(@currentField) > 100, '100', if(Number(@currentField) < 0, '0', Number(@currentField)))) + '%'"
    }
  ]
}

Common Questions About the Percent Progress Bar

What is the Percent Progress Bar built with?

It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON applied to the percent field. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a polished list without ongoing development overhead.

What kind of column does it need?

It needs a single Number column that stores a value from 0 to 100, such as % Complete. The JSON is applied to that column, and because it uses the current field rather than a fixed name, you can reuse the same JSON on any number column across your sites.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how existing columns and views look, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

What happens when a value is blank or over 100?

The formatting handles messy data on purpose. A blank cell falls back to a flat 0% bar so the list never looks broken, and any value above 100 or below 0 is clamped to the nearest valid point. The label and the bar always agree.

Can Greg build formatting like this for our lists?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.