> For the complete documentation index, see [llms.txt](https://neptune-css.gitbook.io/neptune-css-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://neptune-css.gitbook.io/neptune-css-docs/components/progress-bars.md).

# Progress Bars

{% code title="Default Progress Bar" %}

```html
<div class="progress progress-m">
    <div class="progress-bar"></div>
</div>
```

{% endcode %}

## Sizes

{% tabs %}
{% tab title="Extra Small" %}

```html
<div class="progress progress-xs">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}

{% tab title="Small" %}

```html
<div class="progress progress-s">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}

{% tab title="Medium" %}

```html
<div class="progress progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}

{% tab title="Large" %}

```html
<div class="progress progress-l">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}

{% tab title="Extra Large" %}

```html
<div class="progress progress-xl">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/mdzzoRW>" %}
Progress bar size examples
{% endembed %}

## Styles

{% tabs %}
{% tab title="Primary" %}

```html
<div class="progress progress-primary progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}

{% tab title="Accent" %}

```html
<div class="progress progress-accent progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}

{% tab title="Information" %}

```html
<div class="progress progress-info progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}

{% tab title="Success" %}

```html
<div class="progress progress-success progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}

{% tab title="Warning" %}

```html
<div class="progress progress-warning progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}

{% tab title="Error" %}

```html
<div class="progress progress-error progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/PoyyLWK>" %}
Progress bar color examples
{% endembed %}