# dyna-ui-progress-bar

> Simple unstyled react progress bar

Latest version **1.1.5** (published 2018-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install dyna-ui-progress-bar
pnpm add dyna-ui-progress-bar
yarn add dyna-ui-progress-bar
bun add dyna-ui-progress-bar
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2018-07-02 |
| First published | 2018-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 55.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | dennisat |

## Links

- npm: https://www.npmjs.com/package/dyna-ui-progress-bar
- Repository: https://github.com/aneldev/dyna-ui-progress-bar
- Homepage: https://github.com/aneldev/dyna-ui-progress-bar#readme
- Issues: https://github.com/aneldev/dyna-ui-progress-bar/issues
- npm.io page: https://npm.io/package/dyna-ui-progress-bar

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.1
- [dyna-ui-loading-ghost](https://npm.io/package/dyna-ui-loading-ghost.md) ^1.0.2

## Recent versions

- 1.1.5 (latest) — 2018-07-02
- 1.1.4 — 2018-06-24
- 1.1.3 — 2018-06-10
- 1.1.2 — 2018-06-08
- 1.1.1 — 2018-06-02
- 1.0.1 — 2018-04-05
- 0.0.3 — 2018-04-05
- 0.0.2 — 2018-04-03

## README

# About

Simple progress bar in react

# Demo

`npm start`

# Props

```
    className?: string;
    min: number;
    max: number;
    value: number;
    isLoading?: boolean;
    label?: string | JSX.Element;
    onClick?: () => void;
```

# Style

The component is comming with no style.

It has a default style black and white you should override it.

## css class dyna-progress-bar__background

Is the class name of the wrapper of the component, apply there the background color and/or borders.

## css class dyna-progress-bar__progress

Is the inside progress bar, apply there the background of the progress bar.

## css class dyna-progress-bar__label

Is the wrapper of the label, center the label as you prefer.

## The default style

This the default styles you should override

```
// default style
.dyna-progress-bar {
    &__background{
        background-color: lightgray;
        border: 1px solid grey;
    }
    &__progress{
        background-color: rebeccapurple;
        border-right: 1px solid grey;
    }
    &__label{
    }
}
```

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