Progress

Basic progress example demonstrating core behavior.

Package: @solidiom/progress
Version: 0.0.1-next.0
Status: stable

Examples

import * as Progress from "@solidiom/progress"

;<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
  <Progress.Root value={65} aria-label="Upload progress">
    <Progress.Indicator />
  </Progress.Root>

  <Progress.Root value={100} aria-label="Complete">
    <Progress.Indicator />
  </Progress.Root>

  <Progress.Root value={null} aria-label="Loading">
    <Progress.Indicator />
  </Progress.Root>
</div>

Pass a numeric value (0 to max, default 100) for determinate progress, or null for indeterminate loading. The Root emits data-state of “loading” or “complete” and data-percent for styling the Indicator fill.

View source

        export function Root(props: ProgressRootProps) {
  const max = () => props.max ?? 100
  const percentage = () => (props.value != null ? Math.round((props.value / max()) * 100) : null)
  const state = () => {
    if (props.value == null) return "loading"
    return props.value >= max() ? "complete" : "loading"
  }

  return (
    <div
      role="progressbar"
      aria-valuenow={props.value ?? undefined}
      aria-valuemin={0}
      aria-valuemax={max()}
      aria-label={props["aria-label"]}
      aria-labelledby={props["aria-labelledby"]}
      class={props.class}
      style={props.style}
      data-value={props.value ?? undefined}
      data-max={max()}
      data-percent={percentage() ?? undefined}
      {...applySemanticAttrs({
        scope: "progress",
        part: "root",
        state: state(),
      })}
    >
      {props.children}
    </div>
  )
}