Progress Ring

The Progress Ring draws a percentage as a filled ring with the number in the middle, so completion reads as a clean, chart-like dial. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a number field, drawn as a crisp inline SVG ring. The arc fills to the value and the color shifts as it climbs.

Author

SharePoint Maven

Built with

• Lists

Features

JSON, Number Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Draws a percentage as a filled ring with the number in the middle
• The arc fills to the value on a 0 to 100 scale
• The color shifts as the value climbs
• Drawn as a crisp inline SVG that stays sharp at any size
• A compact, chart-like dial for a single figure
• Applied as column-formatting JSON on a number field, so it changes nothing about the underlying data

Common Use Cases

• Completion or progress on a tracker
• Goal or quota attainment
• Utilization or capacity
• Coverage or adoption rates
• Score or health as a percentage
• Any 0 to 100 metric you want shown as a dial

Details

• Design Pattern: Metrics & Progress
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Then populate the list with values from 0 to 100.
3. Because the JSON is applied at the column level, the Progress column can use any name you want.
4. The color thresholds live in the JSON – change them to match your own bands.
5. Store the value in a Number column on a 0 to 100 scale – a value stored as a decimal such as 0.73 will not display as 73 percent.

How to Apply JSON code

1. On the Progress column, open the column header menu, choose Column settings, then Format this column.
2. Switch to Advanced mode.
3. Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "justify-content": "center",
    "width": "100%",
    "height": "60px",
    "padding": "6px 0",
    "box-sizing": "border-box"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "width": "48px",
        "height": "48px",
        "border-radius": "50%",
        "background-color": "#e3e1df",
        "overflow": "hidden",
        "flex-shrink": "0"
      },
      "children": [
        {
          "elmType": "svg",
          "attributes": {
            "viewBox": "0 0 48 48"
          },
          "style": {
            "position": "absolute",
            "top": "0",
            "left": "0",
            "width": "48px",
            "height": "48px",
            "fill": "=if(Number(@currentField) >= 75, '#0f7a3d', if(Number(@currentField) >= 40, '#0070c9', '#ff6a00'))",
            "display": "=if(@currentField == '', 'none', 'block')"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "='M24,24 L24,0 A24,24 0 ' + if(Number(@currentField) <= 50, '0', '1') + ',1 ' + toString(24 + (sin(6.2831853 * if(Number(@currentField) >= 100, 99.999, if(Number(@currentField) < 0, 0, Number(@currentField))) / 100) * 24)) + ',' + toString(24 - (cos(6.2831853 * if(Number(@currentField) >= 100, 99.999, if(Number(@currentField) < 0, 0, Number(@currentField))) / 100) * 24)) + ' z'"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "txtContent": "=if(@currentField == '', '-', toString(@currentField) + '%')",
          "style": {
            "position": "absolute",
            "top": "6px",
            "left": "6px",
            "width": "36px",
            "height": "36px",
            "border-radius": "50%",
            "background-color": "#ffffff",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "font-size": "12px",
            "font-weight": "800",
            "color": "#201f1e"
          }
        }
      ]
    }
  ]
}

Common Questions About the Progress Ring