Equality
Equality

Progress

Progress with sizes and variants

Percentage Examples

Value: 0

Value: 75%

Value: 100%

Color Variants

This component supports several color variants that correspond with the brand colors. You can use these variants — such as primary, secondary, green, red, and gold — to visually distinguish different types of progress bars or their context according to your design needs. Each color maps directly to a brand color in the Equality design system, allowing for consistent and meaningful styling in your application.

Primary (default)

Secondary

Green

Red

Yellow