{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": { "width": "100%", "padding": "4px 0" },
  "children": [
    {
      "elmType": "div",
      "style": {
        "height": "10px",
        "background-color": "#eaeaea",
        "border-radius": "6px",
        "overflow": "hidden"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": { "title": "=if(@currentField != null, @currentField + '%', '0%')" },
          "style": {
            "height": "100%",
            "width": "=if(@currentField != null, @currentField, 0) + '%'",
            "background-color": "=if(@currentField >= 70, '#107C10', if(@currentField >= 40, '#ff8c00', '#a80000'))"
          }
        }
      ]
    },
    {
      "elmType": "span",
      "style": { "margin-left": "8px", "font-weight": "600" },
      "txtContent": "=if(@currentField != null, @currentField + '%', '0%')"
    }
  ]
}