React Progressbars

Material Tailwind progressbars components can be used to show a user how far along he/she is in a process.


Simple Progressbar

import React from "react";
import Progress from "@material-tailwind/react/Progress";

export default function Progress() {
    return (
        <Progress color="lightBlue" value="50" percentage={false} />
    );
}
 

Progressbar with Percentage

75% Completed
import React from "react";
import Progress from "@material-tailwind/react/Progress";

export default function Progress() {
    return (
        <Progress color="lightBlue" value="75" percentage={true} />
    );
}