---
sidebar_position: 5
slug: /progress-bar
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

import UppyCdnExample from '/src/components/UppyCdnExample';

# Progress bar

`@uppy/progress-bar` is a minimalist plugin that shows the current upload
progress in a thin bar element, like the ones used by YouTube and GitHub when
navigating between pages.

## When should I use it?

When you need a minimalistec progress indicator and you’re
[building your own UI](/docs/guides/building-your-own-ui-with-uppy). For most
cases, [Dashboard](/docs/dashboard) or [Drag & Drop](/docs/drag-drop) (with
[Status Bar](/docs/status-bar)) is more likely what you need.

## Install

<Tabs>
  <TabItem value="npm" label="NPM" default>

```shell
npm install @uppy/progress-bar
```

  </TabItem>

  <TabItem value="yarn" label="Yarn">

```shell
yarn add @uppy/progress-bar
```

  </TabItem>

  <TabItem value="cdn" label="CDN">
    <UppyCdnExample>
      {`
        import { Uppy, ProgressBar } from "{{UPPY_JS_URL}}"
        const uppy = new Uppy()
        uppy.use(ProgressBar, { target: '#progress-bar' })
      `}
    </UppyCdnExample>
  </TabItem>
</Tabs>

## Use

```js
import Uppy from '@uppy/core';
import ProgressBar from '@uppy/progress-bar';

import '@uppy/core/dist/style.min.css';
import '@uppy/progress-bar/dist/style.min.css';

new Uppy().use(ProgressBar, { target: '#progress-bar' });
```

## API

### Options

#### `id`

A unique identifier for this Progress Bar (`string`, default: `'ProgressBar'`).

Use this if you need to add several ProgressBar instances.

#### `target`

DOM element, CSS selector, or plugin to mount the Progress Bar into (`Element`,
`string`, default: `null`).

#### `fixed`

Show the progress bar at the top of the page with `position: fixed` (`boolean`,
default: `false`).

When set to false, show the progress bar inline wherever it’s mounted.

#### `hideAfterFinish`

Hides the progress bar after the upload has finished (`boolean`, default:
`true`).