Progress

A Progress component visually indicates the completion status of a task or process. It typically consists of a progress bar that fills up as the task progresses, providing users with a clear and immediate understanding of how much of the task is completed and how much remains. This component is commonly used in forms, uploads, downloads, and loading states to enhance user experience by managing expectations and keeping users informed.

import { NProgress } from '@nayan-ui/react';

const Progress = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Bar only</h3>
      <NProgress value={30} />

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">With a visible label</h3>
      <NProgress value={72} label="Uploading" showLabel />
    </div>
  );
};

export default Progress;