Progress bar

A ProgressBar shows how far a task has come. Without a value, it shows work of unknown length.

Usage#

import { ProgressBar } from "@clawscale/react";

<ProgressBar aria-label="Export progress" intent="primary" value={0.42} />

The bar has no visible label. Pass aria-label, or point aria-labelledby at a caption.

Examples#

Intent#

intent colors the bar. Match it to the state of the task.

customers

orders

payments

events

refunds

core/progress-bar/intent.tsx

import { type Intent, ProgressBar } from "@clawscale/react";
import { Fragment } from "react";

const SYNCS: { table: string; intent?: Intent; value: number }[] = [
  { table: "customers", value: 0.35 },
  { table: "orders", intent: "primary", value: 0.6 },
  { table: "payments", intent: "success", value: 1 },
  { table: "events", intent: "warning", value: 0.45 },
  { table: "refunds", intent: "danger", value: 0.2 },
];

export default function ProgressBarIntent() {
  return (
    <div
      style={{
        alignItems: "center",
        display: "grid",
        gap: "12px 16px",
        gridTemplateColumns: "80px 1fr",
        maxWidth: 420,
        width: "100%",
      }}
    >
      {SYNCS.map((sync) => (
        <Fragment key={sync.table}>
          <span>{sync.table}</span>
          <ProgressBar aria-label={`${sync.table} sync`} intent={sync.intent} value={sync.value} />
        </Fragment>
      ))}
    </div>
  );
}

Stripes and animation#

Bars are striped and animated by default. animate={false} stops the motion and stripes={false} removes the stripes. Use a solid bar for finished or paused work.

core/progress-bar/stripes.tsx

import { ProgressBar } from "@clawscale/react";

export default function ProgressBarStripes() {
  return (
    <div style={{ display: "grid", gap: 16, width: "100%", maxWidth: 420 }}>
      <ProgressBar aria-label="Striped and animated" intent="primary" value={0.6} />
      <ProgressBar aria-label="Striped, not animated" intent="primary" value={0.6} animate={false} />
      <ProgressBar aria-label="Solid" intent="primary" value={0.6} stripes={false} />
    </div>
  );
}

Value#

value runs from 0 to 1, and the bar animates between values. Omit value for an indeterminate bar.

Backfill: 0 of 120 partitions

core/progress-bar/value.tsx

import { ProgressBar } from "@clawscale/react";
import { useEffect, useState } from "react";

const PARTITIONS = 120;

export default function ProgressBarValue() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => setTick((current) => (current >= 40 ? 0 : current + 1)), 300);
    return () => clearInterval(timer);
  }, []);
  const done = Math.min(tick * 4, PARTITIONS);
  const finished = done === PARTITIONS;
  return (
    <div style={{ display: "grid", gap: 8, width: "100%", maxWidth: 420 }}>
      <span>
        Backfill: {done} of {PARTITIONS} partitions
      </span>
      <ProgressBar
        aria-label="Backfill progress"
        intent={finished ? "success" : "primary"}
        stripes={!finished}
        value={done / PARTITIONS}
      />
    </div>
  );
}

Interactive playground#

Props

Intent

Indeterminate

Value (%): 60

100

StripesAnimate

View source on GitHub

Props interface#

interface ProgressBarProps extends Props, IntentProps, HTMLDivProps@clawscale/react

Props	Description
`animate`	`boolean` = `true` Whether the background should animate.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`intent`	`Intent` Visual intent color to apply to element. Inherited from `IntentProps`
`stripes`	`boolean` = `true` Whether the background should be striped.
`value`	`number` A value between 0 and 1 (inclusive) representing how far along the operation is. Values below 0 or above 1 will be interpreted as 0 or 1, respectively. Omitting this prop will result in an "indeterminate" progress meter that fills the entire bar.