mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-18 00:55:35 +00:00
91 lines
2 KiB
Text
91 lines
2 KiB
Text
---
|
||
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`).
|