Reshaped Progress bar

Progress bar controlled by a value within a 0-100 range by default, with custom min/max boundaries. Comes in medium and small sizes, primary/critical/warning/positive colors plus a media color for use over images and video, and a CSS-driven duration property for timeout animations.

by reshaped

import { Reshaped } from "reshaped/bundle";
import ProgressBar from "@/components/ui/reshaped-progress-bar";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 400, width: "100%", margin: "0 auto", padding: 24 }}>
        <ProgressBar value={50} />
      </div>
    </Reshaped>
  );
}