Synthax UI v1.4.4

Feedback

ProgressBar

Comprehensive progress indicators for displaying completion status. Essential for multi-step forms, file uploads, and long-running operations in healthcare applications.

Visual Styles

Choose the style that best fits your design. Solid is clean and professional, striped adds visual interest, gradient provides a premium feel.

Solid (default)

Striped (animated)

Gradient

Sizes

Choose the appropriate size based on context. Use larger bars for prominent indicators, smaller ones for inline or compact displays.

Extra Small (4px)

Small (6px)

Medium (10px) - default

Large (14px)

Color Variants

Use semantic colors to indicate status. Primary for general progress, success for completion, warning for attention needed, error for failures.

Processing... 75%
Complete 100%
Review Required 45%
Failed 30%
Syncing... 60%

With Labels and Values

Provide context with labels and show progress as percentage or fraction.

Patient Registration Form 45%
Documents Uploaded 3/5

Segmented Progress

Perfect for multi-step workflows like patient intake, insurance verification, or claim processing. Shows clear step-by-step progress.

Basic Segmented

Intake Progress 2/5

With Step Indicators

3
4
5

With Step Labels

3
4
5
DemographicsInsuranceMedical HistoryConsentReview

Buffer Indicator

Show buffered/loaded amount alongside current progress. Useful for streaming data or showing background loading.

Loading Medical Images 30%

Blue bar shows playback position (30%), gray buffer shows loaded content (60%)

Indeterminate State

Use when progress duration is unknown, such as during API calls or background processing where you cannot calculate percentage.

Verifying patient records...
Processing claim submission...
Syncing with EHR...

File Upload Example

Real-world example combining progress bar with file upload UI. Shows how to transition between states.

medical_report.pdf

Ready to upload • 2.4 MB

Healthcare Workflow Example

Complete patient intake workflow showing how segmented progress guides users through multi-step processes.

Patient Intake

Complete all steps to finish registration

2/5

steps complete

3
4
5
Patient InfoInsuranceHistoryConsentReview

Props

PropTypeDefaultDescription
value number0Current progress value (0-max)
max number100Maximum value
buffer number—Buffer value for showing buffered/loaded amount
indeterminate booleanfalseShow indeterminate (animated) state
label string'Progress'Accessible label for screen readers
showLabel booleanfalseShow the label visually
showPercentage booleanfalseShow percentage text
showValue booleanfalseShow value as fraction (e.g., "3/5")
size 'xs' | 'sm' | 'md' | 'lg''md'Size of the progress bar
variant 'primary' | 'success' | 'warning' | 'error' | 'info''primary'Color variant
style 'solid' | 'striped' | 'gradient''solid'Visual style
segmented booleanfalseShow as segmented/stepped progress
showSteps booleanfalseShow step indicators for segmented progress
stepLabels string[]—Custom labels for each step
animated booleantrueAnimate value changes

Healthcare Best Practices

  • Clear Labels: Always provide descriptive labels to help users understand what progress is being tracked.
  • Segmented for Workflows: Use segmented progress for multi-step processes like patient intake or claim submission.
  • Status Colors: Use variant="success" when complete, variant="error" for failures.
  • Indeterminate When Unknown: Use indeterminate for operations with unknown duration (API calls, background processing).
  • Show Percentage: Always show percentage or step count for determinate progress to give users clear feedback.
  • Larger for Critical: Use larger sizes (size="lg") for important workflows where visibility matters.

Accessibility Notes

  • ARIA Progressbar: Uses role="progressbar" with proper aria-valuenow, aria-valuemin, and aria-valuemax.
  • Value Text: Provides aria-valuetext with human-readable progress (e.g., "75%" or "2 of 5 steps complete").
  • Label Association: Labels are properly associated via aria-labelledby when visible.
  • Reduced Motion: Animations are disabled for users with prefers-reduced-motion preference.