Skip to main content

Uppy 4.0 is here: TypeScript rewrite, Google Photos, React hooks, and much more.

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. For most cases, Dashboard or Drag & Drop (with Status Bar) is more likely what you need.

Install

npm install @uppy/progress-bar

Use

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