# react-loader-progressbar

> Free NPM package for react loader, spinner, progressbar

Latest version **1.1.6** (published 2022-02-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-loader-progressbar
pnpm add react-loader-progressbar
yarn add react-loader-progressbar
bun add react-loader-progressbar
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2022-02-20 |
| First published | 2022-02-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Md Wahiduzzaman Emon |
| Maintainers | wahed_emon |
| Keywords | loader, progressbar, spinner, react loader |

## Links

- npm: https://www.npmjs.com/package/react-loader-progressbar
- Repository: https://github.com/MdWahiduzzamanEmon/React-Loader-Progressbar
- Homepage: https://github.com/MdWahiduzzamanEmon/React-Loader-Progressbar#readme
- Issues: https://github.com/MdWahiduzzamanEmon/React-Loader-Progressbar/issues
- npm.io page: https://npm.io/package/react-loader-progressbar

## Recent versions

- 1.1.6 (latest) — 2022-02-20
- 1.1.5 — 2022-02-20
- 1.1.4 — 2022-02-20
- 1.1.3 — 2022-02-06
- 1.1.2 — 2022-02-06
- 1.1.1 — 2022-02-06
- 1.2.0 — 2022-02-06
- 1.1.0 — 2022-02-06
- 1.0.0 — 2022-02-06

## README

# What is this?

Get React Loader|| ProgressBar with styled components.

## Installation

`npm install react-loader-progressbar --save`

`npm install --save styled-components`

## Components

    <CircularLoaderEditable/>
    <CircularTimeLoader/>
    <CircularEffect/>
    <PulseLoader/>
    <DoubleCircularLoader/>
    <AnimatedProgressBar/>
    <PercentProgressBar/>
    <LinearProgressBar/>
    <LinearProgressBarTwo/>

### uses

`import CircularLoaderEditable, { CircularEffect, CircularTimeLoader, PulseLoader, DoubleCircularLoader, AnimatedProgressBar, PercentProgressBar, LinearProgressBar, LinearProgressBarTwo } from 'react-loader-progressbar';`

```sh
 <CircularLoaderEditable color="red" stroke="5px" size="50px" delay="3s" />
```
## Options for props

`color`: Color of the loader. Default: `#00AABB`

`delay`: Animation delay. Default: `3s`

`size`: Size of the loader

`margin`: Margin of the loader. Default: `0`

`stroke`: Border width of the progress bar. Default: `1px`




## PercentProgressBar

`percent`: Percent of the progress bar. Default: `0`

`fontSize`: Font size of the percent. Default: `12px`

`textColor`: Color of the percent. Default: `#00AABB`

## LinearProgressBarTwo

`width`: Width of the progress bar. Default: `50%`

`height`: Height of the progress bar. Default: `5px`

## DoubleCircularLoader

`borderColor`: Color of the border. Default: `#00AABB`

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