Uppy is an open source project by Transloadit
Transloadit Community Plan: free hosted Companion & tusd, unlimited uploading, and 5GB/mo encoding traffic!

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.