---
title: "Progress"
description: "Progress with sizes and variants"
source: "Equality"
---
import { Progress } from "@eqtylab/equality";

## Percentage Examples

### Value: 0

<Progress value={0} client:only="react" />

### Value: 75%

<Progress value={75} client:only="react" />

### Value: 100%

<Progress value={100} client:only="react" />

## 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)

<Progress value={50} color="primary" client:only="react" />

### Secondary

<Progress value={50} color="secondary" client:only="react" />

### Green

<Progress value={50} color="green" client:only="react" />

### Red

<Progress value={50} color="red" client:only="react" />

### Yellow

<Progress value={50} color="yellow" client:only="react" />