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.

import ProgressBar from '@uppy/progress-bar'

uppy.use(ProgressBar, {
  // Options
})

Try it live

The @uppy/drag-drop example uses a Progress Bar to show progress.

Installation

This plugin is published as the @uppy/progress-bar package.

Install from NPM:

npm install @uppy/progress-bar

In the CDN package, the plugin class is available on the Uppy global object:

const { ProgressBar } = Uppy

CSS

The @uppy/progress-bar plugin requires the following CSS for styling:

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

Import general Core styles from @uppy/core/dist/style.css first, then add the Progress Bar styles from @uppy/progress-bar/dist/style.css. A minified version is also available as style.min.css at the same path. The way to do import depends on your build system.

⚠️ If you use the @uppy/dashboard plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it.

Options

The @uppy/progress-bar plugin has the following configurable options:

uppy.use(ProgressBar, {
  target: '.UploadForm',
  fixed: false,
  hideAfterFinish: true,
})

`id: 'ProgressBar'`

A unique identifier for this Progress Bar. It defaults to 'ProgressBar'. Use this if you need to add many ProgressBar instances.

`target: null`

DOM element, CSS selector, or plugin to mount the progress bar into.

`fixed: false`

When set to true, show the progress bar at the top of the page with position: fixed. When set to false, show the progress bar inline wherever it’s mounted.

uppy.use(ProgressBar, {
  target: 'body',
  fixed: true,
})

`hideAfterFinish: true`

When set to true, hides the progress bar after the upload has finished. If set to false, it remains visible.

Docs

UI Elements

Sources

Destinations

Miscellaneous

React

Other Integrations

Contributing