# react-js-loading-progress-bar

> React JS loading progress (bar and throbber) component that shows estimated time left (if several requests need to be made) and progress bar with percentage.

Latest version **0.3.1** (published 2020-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-js-loading-progress-bar
pnpm add react-js-loading-progress-bar
yarn add react-js-loading-progress-bar
bun add react-js-loading-progress-bar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2020-05-04 |
| First published | 2018-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 38.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jose Antonio Ciccio |
| Maintainers | jciccio |
| Keywords | loading, progress bar, time left, estimated time, progress meter, loading indicator, progress, bar, throbber |

## Links

- npm: https://www.npmjs.com/package/react-js-loading-progress-bar
- Repository: https://github.com/jciccio/react-loading-progress
- Issues: https://github.com/jciccio/react-loading-progress/issues
- npm.io page: https://npm.io/package/react-js-loading-progress-bar

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.0.0
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.8.7

## Alternatives

- [@sentry/react-native](https://npm.io/package/@sentry/react-native.md) — 2.6M weekly downloads
- [@ardatan/aggregate-error](https://npm.io/package/@ardatan/aggregate-error.md) — 708.1K weekly downloads
- [custom-error-generator](https://npm.io/package/custom-error-generator.md) — 2.0K weekly downloads
- [@technik-sde/prosemirror-recreate-transform](https://npm.io/package/@technik-sde/prosemirror-recreate-transform.md) — 1.5K weekly downloads
- [@suchipi/error-utils](https://npm.io/package/@suchipi/error-utils.md) — 78 weekly downloads

## Recent versions

- 0.3.1 (latest) — 2020-05-04
- 0.3.0 — 2020-03-28
- 0.2.4 — 2018-09-22
- 0.2.3 — 2018-08-04
- 0.2.0 — 2018-06-30
- 0.1.6 — 2018-06-14
- 0.1.5 — 2018-06-07
- 0.1.4 — 2018-06-07
- 0.1.3 — 2018-05-28
- 0.1.2 — 2018-05-28
- 0.1.1 — 2018-05-27
- 0.1.0 — 2018-05-27
- 0.0.1 — 2018-05-27

## README

![npm](https://img.shields.io/npm/dt/react-js-loading-progress-bar.svg)
![npm](https://img.shields.io/npm/v/react-js-loading-progress-bar.svg)
![npm](https://img.shields.io/npm/l/react-js-loading-progress-bar.svg)


# React-loading-progress

Simple react JS Progress / Loading bar for multiple files

# Description

React loading component with progress bar, percentage and time estimated for the operation to be completed.

How it looks:
![alt text](loading.png "Loading bar example")

It has two options the compact mode, that shows the progress bar, percentage and time left in a single line, and the full mode which outputs in different lines how much items has processed, the current percentage, the progress bar and the estimated time to complete the current operation.


You can now opt for two more options:
1. Having a spinner instead of a progress bar 
2. Showing just the spinner and progress bar without any text

![alt text](loading2.png "Loading bar example")

**How to thank me?**
Just click on ⭐️ button :)

# Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

```
npm i react-js-loading-progress-bar
```


# Usage

Import `LoadingProgress` in your react component.

```
import LoadingProgress from 'react-js-loading-progress-bar';
```

Props available:

| Name        | Type            | Mandatory | Description  
| ------------- |:-------------:| -----:|:-----|
| total      | integer | Y |The total items you are going to process |
| active      | boolean   | Y   |   If you want to activate the loading component |
| current | integer     | Y|   The current item being processed |
| showCompact | present?   |N  |   If you want the single line version (full by default) |
| title | String   |N  |   Render custom title |
| hideProcessingRequest | present?   |N  |   Render processing request in full mode |
| hideTimeRemaining | present?   |N  |   Render time remaining in full mode |
| hideProgressBar | present?   |N  |   Hide entirely the progress bar or spinner |
| hideQtyProcessed | present?   |N  |  Hide the amount of items processed |
| useSpinner | present?   |N  |  changes the progress bar with a spinner (throbber) |
| visualOnly | present?   |N  |  Shows only the progress bar or throbber (depending on the mode you are using) |


For example:
```javascript
 <LoadingProgress
  active={true}
  total={this.state.total}
  current={this.state.current}
  showCompact       
/>
```

To use the spinner instead of the progress bar you can use the useSpinner prop as follows:

```javascript
<LoadingProgress
  useSpinner
  active={true}
  total={this.state.total}
  current={this.state.current}
/>
```
# Changelog

### v0.3.1
* Overall package size optimized

### v0.3.0
* Dependencies updated

# License 

Licensed under the MIT License © [jciccio](https://www.npmjs.com/~jciccio)

---
_Source: https://npm.io/package/react-js-loading-progress-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._