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
- Yarn
- CDN
npm install @uppy/progress-bar
yarn add @uppy/progress-bar
The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.
It can be useful to speed up your development environment, so don't hesitate to use it to get you started.
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v4.7.0/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, ProgressBar } from "https://releases.transloadit.com/uppy/v4.7.0/uppy.min.mjs"
const uppy = new Uppy()
uppy.use(ProgressBar, { target: '#progress-bar' })
</script>
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).