> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress

> Visual indicator of completion or loading state.

export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
  const hostRef = React.useRef(null);
  const handleRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [previewWidth, setPreviewWidth] = React.useState(null);
  const [isDragging, setIsDragging] = React.useState(false);
  const [playgroundHref, setPlaygroundHref] = React.useState(null);
  React.useEffect(function () {
    if (!playground) return;
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var path = isLocal ? "/playground" : "/docs/playground";
    var url = new URL(path, window.location.href);
    url.hash = "code=" + playground;
    setPlaygroundHref(url.href);
  }, [playground]);
  var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
  React.useEffect(function () {
    if (cardRef.current) {
      var card = cardRef.current.closest(".group");
      if (card) card.classList.remove("group");
    }
    var host = hostRef.current;
    if (!host || !json) return;
    function mount() {
      if (!window.__prefab || !host) return;
      var dark = document.documentElement.classList.contains("dark");
      handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
        dark: dark
      });
      if (bare && host.shadowRoot) {
        var m = host.shadowRoot.querySelector("[data-prefab-mount]");
        if (m) m.style.background = "transparent";
      }
    }
    if (window.__prefab) {
      mount();
    } else {
      if (!window.__prefabLoading) {
        if (!window.__prefabReady) {
          var s = document.createElement("script");
          s.src = "/renderer.js";
          document.head.appendChild(s);
        }
        window.__prefabLoading = new Promise(function (resolve) {
          function check() {
            if (window.__prefabReady) {
              window.__prefabReady.then(resolve);
            } else {
              setTimeout(check, 10);
            }
          }
          check();
        });
      }
      window.__prefabLoading.then(mount);
    }
    var observer = new MutationObserver(function () {
      var dark = document.documentElement.classList.contains("dark");
      if (handleRef.current) handleRef.current.setDark(dark);
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return function () {
      observer.disconnect();
      if (handleRef.current) {
        handleRef.current.unmount();
        handleRef.current = null;
      }
    };
  }, [json]);
  function startResize(e) {
    e.preventDefault();
    var startX = e.clientX;
    var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
    var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
    setIsDragging(true);
    function onMove(ev) {
      var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
      setPreviewWidth(w);
    }
    function onUp() {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseup", onUp);
      setIsDragging(false);
    }
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  }
  if (bare) {
    return <div ref={hostRef} />;
  }
  if (resizable) {
    return <Card>
        <div ref={cardRef} />
        <div ref={containerRef} style={{
      display: "flex",
      position: "relative",
      overflow: "hidden"
    }}>
          <div ref={hostRef} style={{
      flex: previewWidth ? "none" : 1,
      width: previewWidth ? previewWidth + "px" : undefined,
      minWidth: 0
    }} />
          <div onMouseDown={startResize} style={{
      width: "14px",
      flexShrink: 0,
      cursor: "col-resize",
      background: isDragging ? "var(--border, #e5e7eb)" : "color-mix(in srgb, var(--border, #e5e7eb) 40%, transparent)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "background 0.15s",
      userSelect: "none"
    }}>
            <svg width="6" height="24" style={{
      opacity: 0.5
    }}>
              <circle cx="2" cy="4" r="1.2" fill="currentColor" />
              <circle cx="2" cy="9" r="1.2" fill="currentColor" />
              <circle cx="2" cy="14" r="1.2" fill="currentColor" />
              <circle cx="2" cy="19" r="1.2" fill="currentColor" />
              <circle cx="5" cy="4" r="1.2" fill="currentColor" />
              <circle cx="5" cy="9" r="1.2" fill="currentColor" />
              <circle cx="5" cy="14" r="1.2" fill="currentColor" />
              <circle cx="5" cy="19" r="1.2" fill="currentColor" />
            </svg>
          </div>
          <div style={{
      flex: previewWidth ? 1 : "0 0 24px",
      minWidth: "24px",
      background: "repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border, #e5e7eb) 3px, var(--border, #e5e7eb) 4px)",
      opacity: 0.4
    }} />
          {previewWidth && <div style={{
      position: "absolute",
      bottom: "8px",
      right: "8px",
      background: "var(--background, white)",
      border: "1px solid var(--border, #e5e7eb)",
      borderRadius: "4px",
      padding: "1px 6px",
      fontSize: "11px",
      fontFamily: "monospace",
      color: "var(--muted-foreground, #6b7280)",
      pointerEvents: "none"
    }}>
              {previewWidth}px
            </div>}
        </div>
        {playgroundHref && <div style={{
      display: "flex",
      justifyContent: "flex-end",
      padding: "4px 0 8px"
    }}>
            <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
      fontSize: "11px",
      opacity: 0.4,
      textDecoration: "none",
      textDecorationLine: "none",
      borderBottom: "none",
      boxShadow: "none",
      display: "inline-flex",
      alignItems: "center",
      gap: "3px",
      transition: "opacity 0.15s",
      fontWeight: 400
    }} onMouseOver={function (e) {
      e.currentTarget.style.opacity = "0.6";
    }} onMouseOut={function (e) {
      e.currentTarget.style.opacity = "0.4";
    }}>
              Edit in Playground
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
            </a>
          </div>}
        <div style={{
      marginBottom: "-2rem"
    }}>{children}</div>
      </Card>;
  }
  return <Card>
      <div ref={cardRef} />
      <div ref={hostRef} />
      {playgroundHref && <div style={{
    display: "flex",
    justifyContent: "flex-end",
    padding: "4px 0 8px"
  }}>
          <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
    fontSize: "11px",
    opacity: 0.4,
    textDecoration: "none",
    textDecorationLine: "none",
    borderBottom: "none",
    boxShadow: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: "3px",
    transition: "opacity 0.15s",
    fontWeight: 400
  }} onMouseOver={function (e) {
    e.currentTarget.style.opacity = "0.6";
  }} onMouseOut={function (e) {
    e.currentTarget.style.opacity = "0.4";
  }}>
            Edit in Playground
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
          </a>
        </div>}
      <div style={{
    marginBottom: "-2rem"
  }}>{children}</div>
    </Card>;
};

Progress bars show how far along a process is. They fill from left to right as `value` approaches `max`.

## Basic Usage

<ComponentPreview json={{"view":{"type":"Progress","value":60.0,"variant":"default","size":"default"}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUHJvZ3Jlc3MKClByb2dyZXNzKHZhbHVlPTYwKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Progress

    Progress(value=60)
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {"type": "Progress", "value": 60.0, "variant": "default", "size": "default"}
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Range

By default `max` is 100 and `min` is 0, but you can set either to define a custom range. The renderer normalizes the value to a percentage automatically. Set `max` for step-style counting, or use both `min` and `max` when the range doesn't start at zero.

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"3 of 5 steps","optional":false},{"type":"Progress","value":3.0,"max":5.0,"variant":"default","size":"default"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Temperature: 72\u00b0F (range 60\u2013100)","optional":false},{"type":"Progress","value":72.0,"min":60.0,"max":100.0,"variant":"warning","size":"default"}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBMYWJlbCwgUHJvZ3Jlc3MKCndpdGggQ29sdW1uKGdhcD00KToKICAgIHdpdGggQ29sdW1uKGdhcD0yKToKICAgICAgICBMYWJlbCgiMyBvZiA1IHN0ZXBzIikKICAgICAgICBQcm9ncmVzcyh2YWx1ZT0zLCBtYXg9NSkKICAgIHdpdGggQ29sdW1uKGdhcD0yKToKICAgICAgICBMYWJlbCgiVGVtcGVyYXR1cmU6IDcywrBGIChyYW5nZSA2MOKAkzEwMCkiKQogICAgICAgIFByb2dyZXNzKHZhbHVlPTcyLCBtaW49NjAsIG1heD0xMDAsIHZhcmlhbnQ9Indhcm5pbmciKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Column, Label, Progress

    with Column(gap=4):
        with Column(gap=2):
            Label("3 of 5 steps")
            Progress(value=3, max=5)
        with Column(gap=2):
            Label("Temperature: 72°F (range 60–100)")
            Progress(value=72, min=60, max=100, variant="warning")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4",
        "type": "Column",
        "children": [
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "3 of 5 steps", "optional": false},
              {
                "type": "Progress",
                "value": 3.0,
                "max": 5.0,
                "variant": "default",
                "size": "default"
              }
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {
                "type": "Label",
                "text": "Temperature: 72\u00b0F (range 60\u2013100)",
                "optional": false
              },
              {
                "type": "Progress",
                "value": 72.0,
                "min": 60.0,
                "max": 100.0,
                "variant": "warning",
                "size": "default"
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Variants

Semantic variants color the progress bar to communicate meaning at a glance:

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Default","optional":false},{"type":"Progress","value":60.0,"variant":"default","size":"default"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Success","optional":false},{"type":"Progress","value":100.0,"variant":"success","size":"default"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Warning","optional":false},{"type":"Progress","value":72.0,"variant":"warning","size":"default"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Destructive","optional":false},{"type":"Progress","value":90.0,"variant":"destructive","size":"default"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Info","optional":false},{"type":"Progress","value":45.0,"variant":"info","size":"default"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Muted","optional":false},{"type":"Progress","value":30.0,"variant":"muted","size":"default"}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBMYWJlbCwgUHJvZ3Jlc3MKCndpdGggQ29sdW1uKGdhcD00KToKICAgIHdpdGggQ29sdW1uKGdhcD0yKToKICAgICAgICBMYWJlbCgiRGVmYXVsdCIpCiAgICAgICAgUHJvZ3Jlc3ModmFsdWU9NjApCiAgICB3aXRoIENvbHVtbihnYXA9Mik6CiAgICAgICAgTGFiZWwoIlN1Y2Nlc3MiKQogICAgICAgIFByb2dyZXNzKHZhbHVlPTEwMCwgdmFyaWFudD0ic3VjY2VzcyIpCiAgICB3aXRoIENvbHVtbihnYXA9Mik6CiAgICAgICAgTGFiZWwoIldhcm5pbmciKQogICAgICAgIFByb2dyZXNzKHZhbHVlPTcyLCB2YXJpYW50PSJ3YXJuaW5nIikKICAgIHdpdGggQ29sdW1uKGdhcD0yKToKICAgICAgICBMYWJlbCgiRGVzdHJ1Y3RpdmUiKQogICAgICAgIFByb2dyZXNzKHZhbHVlPTkwLCB2YXJpYW50PSJkZXN0cnVjdGl2ZSIpCiAgICB3aXRoIENvbHVtbihnYXA9Mik6CiAgICAgICAgTGFiZWwoIkluZm8iKQogICAgICAgIFByb2dyZXNzKHZhbHVlPTQ1LCB2YXJpYW50PSJpbmZvIikKICAgIHdpdGggQ29sdW1uKGdhcD0yKToKICAgICAgICBMYWJlbCgiTXV0ZWQiKQogICAgICAgIFByb2dyZXNzKHZhbHVlPTMwLCB2YXJpYW50PSJtdXRlZCIpCg">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Column, Label, Progress

    with Column(gap=4):
        with Column(gap=2):
            Label("Default")
            Progress(value=60)
        with Column(gap=2):
            Label("Success")
            Progress(value=100, variant="success")
        with Column(gap=2):
            Label("Warning")
            Progress(value=72, variant="warning")
        with Column(gap=2):
            Label("Destructive")
            Progress(value=90, variant="destructive")
        with Column(gap=2):
            Label("Info")
            Progress(value=45, variant="info")
        with Column(gap=2):
            Label("Muted")
            Progress(value=30, variant="muted")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4",
        "type": "Column",
        "children": [
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Default", "optional": false},
              {"type": "Progress", "value": 60.0, "variant": "default", "size": "default"}
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Success", "optional": false},
              {"type": "Progress", "value": 100.0, "variant": "success", "size": "default"}
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Warning", "optional": false},
              {"type": "Progress", "value": 72.0, "variant": "warning", "size": "default"}
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Destructive", "optional": false},
              {"type": "Progress", "value": 90.0, "variant": "destructive", "size": "default"}
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Info", "optional": false},
              {"type": "Progress", "value": 45.0, "variant": "info", "size": "default"}
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Muted", "optional": false},
              {"type": "Progress", "value": 30.0, "variant": "muted", "size": "default"}
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Sizes

Control the bar thickness with `size`. The default is a medium weight suitable for most layouts; use `sm` for compact spaces and `lg` for dashboard-style data displays:

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Small","optional":false},{"type":"Progress","value":60.0,"variant":"default","size":"sm"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Default","optional":false},{"type":"Progress","value":60.0,"variant":"default","size":"default"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Large","optional":false},{"type":"Progress","value":60.0,"variant":"default","size":"lg"}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBMYWJlbCwgUHJvZ3Jlc3MKCndpdGggQ29sdW1uKGdhcD00KToKICAgIHdpdGggQ29sdW1uKGdhcD0yKToKICAgICAgICBMYWJlbCgiU21hbGwiKQogICAgICAgIFByb2dyZXNzKHZhbHVlPTYwLCBzaXplPSJzbSIpCiAgICB3aXRoIENvbHVtbihnYXA9Mik6CiAgICAgICAgTGFiZWwoIkRlZmF1bHQiKQogICAgICAgIFByb2dyZXNzKHZhbHVlPTYwKQogICAgd2l0aCBDb2x1bW4oZ2FwPTIpOgogICAgICAgIExhYmVsKCJMYXJnZSIpCiAgICAgICAgUHJvZ3Jlc3ModmFsdWU9NjAsIHNpemU9ImxnIikK">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Column, Label, Progress

    with Column(gap=4):
        with Column(gap=2):
            Label("Small")
            Progress(value=60, size="sm")
        with Column(gap=2):
            Label("Default")
            Progress(value=60)
        with Column(gap=2):
            Label("Large")
            Progress(value=60, size="lg")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4",
        "type": "Column",
        "children": [
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Small", "optional": false},
              {"type": "Progress", "value": 60.0, "variant": "default", "size": "sm"}
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Default", "optional": false},
              {"type": "Progress", "value": 60.0, "variant": "default", "size": "default"}
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Large", "optional": false},
              {"type": "Progress", "value": 60.0, "variant": "default", "size": "lg"}
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Custom Colors

Use `indicator_class` for arbitrary colors beyond the built-in variants:

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Storage Used","optional":false},{"cssClass":"pf-progress-flat","type":"Progress","value":85.0,"variant":"default","size":"default","indicatorClass":"bg-red-500"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Upload Progress","optional":false},{"cssClass":"pf-progress-flat","type":"Progress","value":45.0,"variant":"default","size":"default","indicatorClass":"bg-blue-500"}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Tasks Complete","optional":false},{"cssClass":"pf-progress-flat","type":"Progress","value":100.0,"variant":"default","size":"default","indicatorClass":"bg-green-500"}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBMYWJlbCwgUHJvZ3Jlc3MKCndpdGggQ29sdW1uKGdhcD00KToKICAgIHdpdGggQ29sdW1uKGdhcD0yKToKICAgICAgICBMYWJlbCgiU3RvcmFnZSBVc2VkIikKICAgICAgICBQcm9ncmVzcyh2YWx1ZT04NSwgaW5kaWNhdG9yX2NsYXNzPSJiZy1yZWQtNTAwIikKICAgIHdpdGggQ29sdW1uKGdhcD0yKToKICAgICAgICBMYWJlbCgiVXBsb2FkIFByb2dyZXNzIikKICAgICAgICBQcm9ncmVzcyh2YWx1ZT00NSwgaW5kaWNhdG9yX2NsYXNzPSJiZy1ibHVlLTUwMCIpCiAgICB3aXRoIENvbHVtbihnYXA9Mik6CiAgICAgICAgTGFiZWwoIlRhc2tzIENvbXBsZXRlIikKICAgICAgICBQcm9ncmVzcyh2YWx1ZT0xMDAsIGluZGljYXRvcl9jbGFzcz0iYmctZ3JlZW4tNTAwIikK">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Column, Label, Progress

    with Column(gap=4):
        with Column(gap=2):
            Label("Storage Used")
            Progress(value=85, indicator_class="bg-red-500")
        with Column(gap=2):
            Label("Upload Progress")
            Progress(value=45, indicator_class="bg-blue-500")
        with Column(gap=2):
            Label("Tasks Complete")
            Progress(value=100, indicator_class="bg-green-500")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4",
        "type": "Column",
        "children": [
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Storage Used", "optional": false},
              {
                "cssClass": "pf-progress-flat",
                "type": "Progress",
                "value": 85.0,
                "variant": "default",
                "size": "default",
                "indicatorClass": "bg-red-500"
              }
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Upload Progress", "optional": false},
              {
                "cssClass": "pf-progress-flat",
                "type": "Progress",
                "value": 45.0,
                "variant": "default",
                "size": "default",
                "indicatorClass": "bg-blue-500"
              }
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Tasks Complete", "optional": false},
              {
                "cssClass": "pf-progress-flat",
                "type": "Progress",
                "value": 100.0,
                "variant": "default",
                "size": "default",
                "indicatorClass": "bg-green-500"
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Target Marker

The `target` prop renders a vertical marker line on the bar at a specific position, so you can compare actual progress against a goal. Set `max` to the ceiling of the gauge so both `value` and `target` land at meaningful positions. Use `target_class` to style the marker.

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Below target","optional":false},{"type":"Progress","value":55.0,"variant":"default","size":"default","target":75.0}]},{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Custom target style","optional":false},{"cssClass":"pf-progress-flat","type":"Progress","value":50.0,"variant":"default","size":"default","target":75.0,"indicatorClass":"bg-pink-400","targetClass":"bg-pink-400"}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBMYWJlbCwgUHJvZ3Jlc3MKCndpdGggQ29sdW1uKGdhcD00KToKICAgIHdpdGggQ29sdW1uKGdhcD0yKToKICAgICAgICBMYWJlbCgiQmVsb3cgdGFyZ2V0IikKICAgICAgICBQcm9ncmVzcyh2YWx1ZT01NSwgdGFyZ2V0PTc1KQogICAgd2l0aCBDb2x1bW4oZ2FwPTIpOgogICAgICAgIExhYmVsKCJDdXN0b20gdGFyZ2V0IHN0eWxlIikKICAgICAgICBQcm9ncmVzcygKICAgICAgICAgICAgdmFsdWU9NTAsIAogICAgICAgICAgICB0YXJnZXQ9NzUsCiAgICAgICAgICAgIGluZGljYXRvcl9jbGFzcz0iYmctcGluay00MDAiLAogICAgICAgICAgICB0YXJnZXRfY2xhc3M9ImJnLXBpbmstNDAwIiwKICAgICAgICApCg">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Column, Label, Progress

    with Column(gap=4):
        with Column(gap=2):
            Label("Below target")
            Progress(value=55, target=75)
        with Column(gap=2):
            Label("Custom target style")
            Progress(
                value=50, 
                target=75,
                indicator_class="bg-pink-400",
                target_class="bg-pink-400",
            )
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4",
        "type": "Column",
        "children": [
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Below target", "optional": false},
              {
                "type": "Progress",
                "value": 55.0,
                "variant": "default",
                "size": "default",
                "target": 75.0
              }
            ]
          },
          {
            "cssClass": "gap-2",
            "type": "Column",
            "children": [
              {"type": "Label", "text": "Custom target style", "optional": false},
              {
                "cssClass": "pf-progress-flat",
                "type": "Progress",
                "value": 50.0,
                "variant": "default",
                "size": "default",
                "target": 75.0,
                "indicatorClass": "bg-pink-400",
                "targetClass": "bg-pink-400"
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Vertical Orientation

Set `orientation="vertical"` for vertical progress bars. The default height is set by the theme — wrap in a sized container for custom heights:

<ComponentPreview json={{"view":{"cssClass":"gap-8 h-48 items-end justify-center","type":"Row","children":[{"type":"Progress","value":75.0,"variant":"default","size":"default","orientation":"vertical"},{"type":"Progress","value":50.0,"variant":"success","size":"default","target":80.0,"orientation":"vertical"},{"type":"Progress","value":25.0,"variant":"info","size":"default","orientation":"vertical"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUHJvZ3Jlc3MsIFJvdwoKd2l0aCBSb3coY3NzX2NsYXNzPSJnYXAtOCBoLTQ4IGl0ZW1zLWVuZCBqdXN0aWZ5LWNlbnRlciIpOgogICAgUHJvZ3Jlc3ModmFsdWU9NzUsIG9yaWVudGF0aW9uPSJ2ZXJ0aWNhbCIpCiAgICBQcm9ncmVzcyh2YWx1ZT01MCwgdGFyZ2V0PTgwLCB2YXJpYW50PSJzdWNjZXNzIiwgb3JpZW50YXRpb249InZlcnRpY2FsIikKICAgIFByb2dyZXNzKHZhbHVlPTI1LCB2YXJpYW50PSJpbmZvIiwgb3JpZW50YXRpb249InZlcnRpY2FsIikK">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Progress, Row

    with Row(css_class="gap-8 h-48 items-end justify-center"):
        Progress(value=75, orientation="vertical")
        Progress(value=50, target=80, variant="success", orientation="vertical")
        Progress(value=25, variant="info", orientation="vertical")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-8 h-48 items-end justify-center",
        "type": "Row",
        "children": [
          {
            "type": "Progress",
            "value": 75.0,
            "variant": "default",
            "size": "default",
            "orientation": "vertical"
          },
          {
            "type": "Progress",
            "value": 50.0,
            "variant": "success",
            "size": "default",
            "target": 80.0,
            "orientation": "vertical"
          },
          {
            "type": "Progress",
            "value": 25.0,
            "variant": "info",
            "size": "default",
            "orientation": "vertical"
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Dynamic Progress with Labels

Bind a slider to a progress bar so the label reflects the actual value. Forward-declare the reactive reference with a lambda so it can be used before the slider appears in the tree:

<ComponentPreview json={{"view":{"cssClass":"gap-3","type":"Column","children":[{"cssClass":"justify-between items-center","type":"Row","children":[{"content":"Upload progress","type":"Text"},{"cssClass":"font-bold","content":"{{ slider_1 | percent }}","type":"Text"}]},{"type":"Progress","value":"{{ slider_1 }}","max":1.0,"variant":"default","size":"default"},{"name":"slider_1","value":0.65,"type":"Slider","min":0.0,"max":1.0,"step":0.01,"disabled":false,"size":"default"}]},"state":{"slider_1":0.65}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBQcm9ncmVzcywgUm93LCBTbGlkZXIsIFRleHQKZnJvbSBwcmVmYWJfdWkucnggaW1wb3J0IFJ4Cgp2YWwgPSBSeChsYW1iZGE6IHNsaWRlcikKCndpdGggQ29sdW1uKGdhcD0zKToKICAgIHdpdGggUm93KGNzc19jbGFzcz0ianVzdGlmeS1iZXR3ZWVuIGl0ZW1zLWNlbnRlciIpOgogICAgICAgIFRleHQoIlVwbG9hZCBwcm9ncmVzcyIpCiAgICAgICAgVGV4dCh2YWwucGVyY2VudCgpLCBib2xkPVRydWUpCiAgICBQcm9ncmVzcyh2YWx1ZT12YWwsIG1heD0xKQogICAgc2xpZGVyID0gU2xpZGVyKG1pbj0wLCBtYXg9MSwgc3RlcD0wLjAxLCB2YWx1ZT0wLjY1KQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Column, Progress, Row, Slider, Text
    from prefab_ui.rx import Rx

    val = Rx(lambda: slider)

    with Column(gap=3):
        with Row(css_class="justify-between items-center"):
            Text("Upload progress")
            Text(val.percent(), bold=True)
        Progress(value=val, max=1)
        slider = Slider(min=0, max=1, step=0.01, value=0.65)
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-3",
        "type": "Column",
        "children": [
          {
            "cssClass": "justify-between items-center",
            "type": "Row",
            "children": [
              {"content": "Upload progress", "type": "Text"},
              {"cssClass": "font-bold", "content": "{{ slider_1 | percent }}", "type": "Text"}
            ]
          },
          {
            "type": "Progress",
            "value": "{{ slider_1 }}",
            "max": 1.0,
            "variant": "default",
            "size": "default"
          },
          {
            "name": "slider_1",
            "value": 0.65,
            "type": "Slider",
            "min": 0.0,
            "max": 1.0,
            "step": 0.01,
            "disabled": false,
            "size": "default"
          }
        ]
      },
      "state": {"slider_1": 0.65}
    }
    ```
  </CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Progress Parameters">
  <ParamField body="value" type="float | str" default="0">
    Current progress value. Can be a template expression for dynamic binding.
  </ParamField>

  <ParamField body="min" type="float" default="0">
    Minimum value. The renderer normalizes `(value - min) / (max - min)` to a 0–100 percentage.
  </ParamField>

  <ParamField body="max" type="float" default="100">
    Maximum value.
  </ParamField>

  <ParamField body="variant" type="str" default="default">
    Visual variant: `"default"`, `"success"`, `"warning"`, `"destructive"`, `"info"`, `"muted"`.
  </ParamField>

  <ParamField body="size" type="str" default="default">
    Bar thickness: `"sm"` (4px), `"default"` (6px), `"lg"` (10px).
  </ParamField>

  <ParamField body="target" type="float | str | None" default="None">
    Target marker position on the bar. Renders a vertical line at this value within the min/max range. Can be a template expression for dynamic binding.
  </ParamField>

  <ParamField body="indicator_class" type="str | None" default="None">
    Tailwind classes for the indicator fill bar. Overrides variant coloring.
  </ParamField>

  <ParamField body="target_class" type="str | None" default="None">
    Tailwind classes for the target marker line.
  </ParamField>

  <ParamField body="orientation" type="str" default="horizontal">
    Layout direction: `"horizontal"` or `"vertical"`.
  </ParamField>

  <ParamField body="gradient" type="bool | None" default="None">
    Gradient fill. `None` inherits the theme default, `True` forces a gradient on, `False` forces a solid fill.
  </ParamField>

  <ParamField body="css_class" type="str | None" default="None">
    Tailwind classes for the track (outer container).
  </ParamField>
</Card>

## Protocol Reference

```json Progress theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "type": "Progress",
  "id?": "string",
  "onMount?": "any",
  "value?": "number | string",
  "min?": "number",
  "max?": "number",
  "variant?": "default | success | warning | destructive | info | muted | string",
  "size?": "sm | default | lg",
  "target?": "number | string",
  "indicatorClass?": "string",
  "targetClass?": "string",
  "orientation?": "horizontal | vertical",
  "gradient?": "boolean",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Progress](/protocol/progress).