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

Inherits properties from HTMLElement.

Prop	Type	Default
animate	boolean	true
asChild	boolean	false
getValueLabel	(value: number, max: number) => string
max	number
size	"md""lg"	md
value	numbernull
variant	"primary""success"	primary