ProgressBar

Show Preview
ProgressBar

About ProgressBar

Why this component?

Most progress bars try to do too much. This one does exactly what you need — and does it well.

  • Clean, modern design

  • Easy to understand at a glance

  • Built for real UI use cases

Key Features

  • Adjustable Progress Value: Easily set the percentage with a slider or input — quick and precise control.

  • Custom Colours: Change both the fill and background colours to match any brand or UI theme.

  • Flexible Corner Radius: From sharp edges to fully rounded bars — adapt the shape to your layout style.

  • Optional Label Display: Show or hide the percentage label depending on your design needs.

  • Label Styling Control: Customise label colour and font for better readability and visual consistency.

  • Smooth Animation Control: Adjust duration and delay to create subtle, clean motion — no overdone effects.

  • Responsive & Stretchable Works seamlessly in any width — from thin lines to full-width sections.