component: Progress
name: progress
category: feedback
version: 1.0.0

ai:
  intent: "Visual progress completion meter in horizontal, vertical, and radial orientations"
  visual_role: "Track and filled indicator bar or radial circle"
  density: "compact"
  preferred_when:
    - "Task completion percentages and upload status"
    - "Vertical volume/level meters and column gauges"
    - "File uploads, downloads, and background job metrics"
    - "Resource utilization and KPI dashboards"
  avoid_when:
    - "Discrete multi-step sequential wizard (use Stepper)"
    - "Spinner without measurable or streaming status (use Spinner)"

base:
  position: relative
  width: 100%
  overflow: hidden
  border-radius: "{radius.pill}"
  background-color: "{color.surface.subtle}"

variants:
  default:
    background-color: "{color.surface.subtle}"
  striped:
    background-image: "linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)"
  animated:
    animation: "qhr-progress-stripes 1s linear infinite"
  gradient:
    background-image: "linear-gradient(90deg, {color.primary.bg}, {color.neutral.300})"
  indeterminate:
    animation: "qhr-progress-indeterminate 1.5s infinite ease-in-out"
  segmented:
    display: flex
  vertical:
    display: inline-flex
    flex-direction: column
    justify-content: flex-end

shapes:
  linear:
    display: flex
  circular:
    display: inline-flex
  vertical:
    display: inline-flex

sizes:
  xxs:
    height: "2px"
  xs:
    height: "4px"
  sm:
    height: "6px"
  md:
    height: "10px"
  lg:
    height: "16px"
  xl:
    height: "24px"

states:
  default:
    opacity: 1
  indeterminate:
    animation: "qhr-progress-indeterminate 1.5s infinite ease-in-out"
  complete:
    opacity: 1
  paused:
    opacity: 0.6
  error:
    opacity: 1

structure:
  base:
    native_class: qhr-progress