zebflow 0.7.9

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { cx } from "zeb";

interface ProgressProps {
  value?: number;
  max?: number;
  className?: string;
  [key: string]: any;
}

export function Progress({ value = 0, max = 100, className, ...rest }: ProgressProps) {
  const pct = Math.min(Math.max((value / max) * 100, 0), 100);
  return (
    <div
      role="progressbar"
      aria-valuemin={0}
      aria-valuemax={max}
      aria-valuenow={value}
      className={cx(
        "relative h-2 w-full overflow-hidden rounded-full bg-gray-100",
        className
      )}
      {...rest}
    >
      <div
        className="h-full bg-gray-900 transition-all duration-300 ease-in-out"
        style={{ width: `${pct}%` }}
      />
    </div>
  );
}

export default Progress;