Progress

Displays the status of a task that takes a long time.

"use client";

import { Progress } from "mako-ui/components/progress";
import { useEffect, useState } from "react";

export default function Particle() {
  const [value, setValue] = useState(20);

  useEffect(() => {
    const interval = setInterval(() => {
      setValue((current) => Math.min(100, current + 15));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <Progress aria-label="Upload progress" value={value} />;
}

Usage

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "mako-ui/components/progress"

<Progress value={40} />

Note: If you render children inside Progress, you must also include ProgressTrack and ProgressIndicator inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.

API Reference

Progress

Root component. When no children are provided, automatically renders a track and indicator.

ProgressTrack

Track container for the progress indicator.

ProgressIndicator

Visual indicator showing the current progress.

ProgressLabel

Label text for the progress bar.

ProgressValue

Displays the current value.

Examples

With Label and Value

Export data

import {
  Progress,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from "mako-ui/components/progress";

export default function Particle() {
  return (
    <Progress value={60}>
      <div className="flex items-center justify-between gap-2">
        <ProgressLabel>Export data</ProgressLabel>
        <ProgressValue />
      </div>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
  );
}

With Formatted Value

Upload

"use client";

import {
  Progress,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from "mako-ui/components/progress";

export default function Particle() {
  return (
    <Progress max={512} value={502}>
      <div className="flex items-center justify-between gap-2">
        <ProgressLabel>Upload</ProgressLabel>
        <ProgressValue>{(_formatted, value) => `${value} / 512`}</ProgressValue>
      </div>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
  );
}

On This Page

Usage API Reference Progress ProgressTrack ProgressIndicator ProgressLabel ProgressValue Examples With Label and Value With Formatted Value