Documentation

IfProgress

Titanium progress bar: vertical / right-arrow / down-arrow clipping with a diffuse-tinted multiply fill.

import { IfProgress } from "./index";

export function IfProgressDemo() {
  return (
    <div className="relative size-64">
      <IfProgress kind="vertical" label="竖条" left={8} max={1} top={8} value={0.5} />
      <IfProgress color="orange" kind="arrow-right" label="右箭头" left={40} max={1} top={40} value={0.6} />
      <IfProgress color="cyan" kind="arrow-down" label="下箭头" left={70} max={1} top={40} value={0.4} />
    </div>
  );
}

Install

$pnpm add @tennantite/industrialforegoing

npm installs the compiled package; use the CLI copy above to adapt the source.

Source

packages/industrialforegoing/src/if-progress/index.tsx

The npm package keeps the source tree, so you can copy and adapt it directly.