{
  "tag": "ed-progress-bar",
  "kind": "component",
  "summary": "Progress bars are used to show the status of an ongoing operation.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-bar/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-bar/usage/",
  "playwright": "getByTestId('…').getByRole('progressbar')",
  "dependencies": [],
  "use": [
    "Reassuring users that a longer operation is running and has not stalled",
    "Uploads, downloads, imports, exports, batch operations, and other multi-second tasks",
    "A batch run over many records, such as posting hundreds of invoices, with a percentage the user can follow"
  ],
  "notFor": [
    {
      "when": "Reserving space for page content or layout that is still loading",
      "instead": "[Skeleton](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/skeleton)"
    },
    {
      "when": "A place where a small, self-contained circular indicator fits better, such as inside a button or a tight inline space",
      "instead": "[Progress Ring](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-ring)"
    },
    {
      "when": "A very short wait under about 1 second",
      "instead": "no indicator at all"
    }
  ],
  "rules": [
    {
      "id": "progress-bar/one-second-threshold",
      "rule": "Show a progress indicator only for waits longer than about 1 second. For anything faster, show nothing.",
      "why": "For a faster wait an indicator flashes in and out and is more distracting than reassuring."
    },
    {
      "id": "progress-bar/mode",
      "rule": "Use the determinate mode whenever real progress can be measured, and the indeterminate mode when the system is working but the remaining time truly cannot be estimated.",
      "why": "A filling bar that advances toward completion reduces uncertainty and increases willingness to wait."
    },
    {
      "id": "progress-bar/never-frozen",
      "rule": "Never leave a determinate bar frozen at one value; switch to the indeterminate mode if progress cannot be tracked.",
      "why": "A bar that never moves reads as a crash.",
      "check": "warning"
    },
    {
      "id": "progress-bar/task-label",
      "rule": "Give the bar a short, meaningful label that names the task (\"Uploading files\", \"Importing data\") rather than a bare \"Loading\".",
      "check": "error"
    },
    {
      "id": "progress-bar/label-placement",
      "rule": "Use `label` for visible text above the bar; where no visible text fits, `aria-label` names it.",
      "check": "warning"
    },
    {
      "id": "progress-bar/value-is-percentage",
      "rule": "Set `value` as a percentage from 0 to 100 — the bar has no `max` and no `variant`.",
      "check": "error"
    },
    {
      "id": "progress-bar/indicator-color-on-element",
      "rule": "Set `--ed-progress-bar-indicator-color` on the element itself.",
      "why": "An inherited value loses.",
      "check": "error"
    },
    {
      "id": "progress-bar/visible-throughout",
      "rule": "Keep it visible for the whole operation and remove it promptly once the task finishes."
    },
    {
      "id": "progress-bar/one-bar-per-task",
      "rule": "Represent a single task with a single bar — never stack multiple bars for one logical operation."
    },
    {
      "id": "progress-bar/consistent-indicator",
      "rule": "Never mix linear and circular indicators for the same operation in different places."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "value",
        "property": "value",
        "type": "number",
        "default": "0",
        "description": "The current progress as a percentage, 0 to 100. A value outside the range is drawn and reported\nat the nearer end of it; a value that is no number at all counts as 0."
      },
      {
        "name": "indeterminate",
        "property": "indeterminate",
        "type": "boolean",
        "default": "false",
        "description": "When true, percentage is ignored and the progress bar is drawn in an indeterminate state."
      },
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "The progress bar's label. If you need to display HTML, use the `label` slot instead."
      },
      {
        "name": "aria-label",
        "property": "ariaLabel",
        "type": "null | string",
        "default": "null",
        "description": "The progress bar's accessible name for when no visible label is wanted. Mirrored onto the\ninternal progressbar node, where the role lives — an aria-label left on the host alone would\nsit on a role-less element and be ignored by assistive tech (house pattern: ed-checkbox)."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [],
    "slots": [
      {
        "name": "label",
        "description": "The progress bar's label. Alternatively, you can use the `label` attribute."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-progress-bar-track-height",
        "default": "calc(2 * var(--ed-border-width-3))",
        "description": "The height of the track."
      },
      {
        "name": "--ed-progress-bar-track-color",
        "default": "var(--ed-color-slider-background-color)",
        "description": "The color of the track."
      },
      {
        "name": "--ed-progress-bar-indicator-color",
        "default": "var(--ed-color-brand-fill-normal)",
        "description": "The color of the indicator."
      }
    ],
    "parts": [
      {
        "name": "form-control-label",
        "description": "The label element above the bar."
      },
      {
        "name": "base",
        "description": "The component's base wrapper (track)."
      },
      {
        "name": "indicator",
        "description": "The progress bar's indicator (fill)."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/progress-bar/progress-bar.js';",
  "react": {
    "component": "EdProgressBar",
    "import": "import EdProgressBar from '@eurodata/eurodata-ui/dist/react/progress-bar/index.js';"
  }
}