Progress

Usage

To communicate progress toward a goal, import <Progress> and pass in a value and a max.

import { Progress } from "stylus-ui/Progress";

export default () => <Progress value={50} max={100} />;

Colors

You can change the color of the progress bar by setting its variant to primary (default) or success.

import { Progress } from "stylus-ui/Progress";

export default () => <Progress value={50} max={100} variant="success" />;

Sizing

You can change the height of the progress bar by setting height to md (default) or lg.

import { Progress } from "stylus-ui/Progress";

export default () => <Progress value={50} max={100} size="lg" />;

Animation

By default, the progress bar will animate between values.

import { useState, useEffect } from "react";
import { Progress } from "stylus-ui/Progress";

export default () => {
  const [progress, setProgress] = useState(13);

  const getRandomValue = () => Math.random() * 100;

  useEffect(() => {
    const timer = setInterval(() => setProgress(getRandomValue()), 1000);
    return () => clearInterval(timer);
  }, []);

  return <Progress value={progress} max={100} />;
};

To prevent animation, set animate={false}.

import { useState, useEffect } from "react";
import { Progress } from "stylus-ui/Progress";

export default () => {
  const [progress, setProgress] = useState(13);

  const getRandomValue = () => Math.random() * 100;

  useEffect(() => {
    const timer = setInterval(() => setProgress(getRandomValue()), 1000);
    return () => clearInterval(timer);
  }, []);

  return <Progress value={progress} max={100} animate={false} />;
};

API Reference

Progress

A bar that visualizes progress toward a goal.

animate

boolean = true

Whether the fill bar animates when value changes.

---

asChild

boolean

---

fillClassName

string

Classes applied to the fill bar (the colored part).

---

getValueLabel

(value: number, max: number) => string

---

max

number

---

size

"md" | "lg" = "md"

Height of the bar.

---

value

null | number

---

variant

"primary" | "success" = "primary"

Color of the fill bar: primary (brand gradient) or success (green).

---