Components / Display

Progress

முன்னேற்றம்

Progress bars communicate the completion status of a task. Use them for file uploads, multi-step forms, and long-running operations.

முன்னேற்றப் பட்டைகள் ஒரு பணியின் முடிவு நிலையை தெரிவிக்கின்றன.

Basic progress

Component preview

Application form completionவிண்ணப்ப படிவ நிறைவு

Sizes

Component preview

Progress bar sizesமுன்னேற்றப் பட்டை அளவுகள்

Structure

Anatomy

2 parts documented for implementation and review.

Component map

Track

பாதைrequired<div>

Full-width track bar at h-2 (8px) with rounded-full ends. Background uses bg-primary/20 for subtle tinted base. Overflow-hidden clips the fill indicator.

Indicator

குறிப்பான்required<div>

Colored fill indicator. Width transitions smoothly via CSS transition-all, calculated as (value/max * 100%). Default uses bg-primary. Apply bg-success/bg-warning/bg-destructive for status variants.

API

Props

3 props

value

Type: number
Default: -
Description: Current progress value (0–max).

max

Type: number
Default: 100
Description: Maximum value.

className

Type: string
Default: -
Description: Use h-* to control bar height.

Prop	Type	Default	Description
`value`	`number`	-	Current progress value (0–max).
`max`	`number`	`100`	Maximum value.
`className`	`string`	-	Use h-* to control bar height.

Best practices

Show a percentage label alongside the progress bar

முன்னேற்றப் பட்டையுடன் சதவீத லேபிள் காட்டவும்

Always pair the progress bar with a visible percentage so users know exactly how far along they are.

சதவீதம் காட்டுவது பயனர் தாங்கள் எவ்வளவு முன்னேறியுள்ளனர் என்று துல்லியமாக அறிய உதவும்.

Don't use indeterminate progress when you know the percentage

சதவீதம் தெரிந்தால் indeterminate முன்னேற்றம் காட்டாதே

An indeterminate (bouncing) indicator when you know the actual progress value misleads users about timing.

சதவீதம் தெரிந்திருக்கும்போது indeterminate பட்டை பயன்படுத்துவது தவறான எதிர்பார்ப்பை உருவாக்கும்.

Pair progress with a descriptive status text

முன்னேற்றத்தை விளக்கும் நிலை உரையுடன் இணைக்கவும்

Show what is currently happening alongside the progress bar so users are never left wondering.

என்ன நடக்கிறது என்று விளக்கும் உரையுடன் முன்னேற்றப் பட்டையை காட்டவும்.

Don't show a progress bar with no label

லேபிள் இல்லாமல் முன்னேற்றப் பட்டை காட்டாதே

A progress bar without context leaves users unable to tell what task is running or how close it is to finishing.

லேபிள் இல்லாத முன்னேற்றப் பட்டை என்ன நடக்கிறது என்று புரியாமல் பயனரை திக்கற்றவராக்கும்.