# progress-bar-with-steps

> Scalable, pure CSS progress bar with a variable number of steps and a customizable color palette

Latest version **1.0.3** (published 2021-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install progress-bar-with-steps
pnpm add progress-bar-with-steps
yarn add progress-bar-with-steps
bun add progress-bar-with-steps
```

## 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.0.3 |
| Published | 2021-02-04 |
| First published | 2021-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jack Wohl |
| Maintainers | jnwjack |
| Keywords | progress, progress-bar, steps, checkpoints, vanilla-js |

## Links

- npm: https://www.npmjs.com/package/progress-bar-with-steps
- Repository: https://github.com/jnwjack/progress-bar-with-steps
- Homepage: https://github.com/jnwjack/progress-bar-with-steps.git#readme
- Issues: https://github.com/jnwjack/progress-bar-with-steps/issues
- npm.io page: https://npm.io/package/progress-bar-with-steps

## Recent versions

- 1.0.3 (latest) — 2021-02-04
- 1.0.2 — 2021-02-04
- 1.0.1 — 2021-02-04
- 1.0.0 — 2021-02-04

## README

# progress-bar-with-steps
Scalable, pure CSS progress bar with a variable number of steps and a customizable color palette

## Install

### npm
```
npm install progress-bar-with-steps --save
```
```javascript
const stepBar = require('progress-bar-with-steps');

stepBar.initProgressBars();
```

### Browser
Put this on your page:
```html
<script src="https://unpkg.com/progress-bar-with-steps@latest/dist/index.min.js" type="text/javascript"></script>
<script>
  initProgressBars();
</script>
```

## Usage
Create a progress bar in your HTML and pass in optional parameters.

### Example
```html
<div class='steps-bar'
  data-num-steps="3" 
  data-current-step="2" 
  data-complete="false"
  data-animation-duration="1.5"
  data-text-color="black"
  data-label-text-1="The first label fjioaewjfoifeaw"
  data-label-text-2="The second label"
  data-label-text-3="faweijfeoijafoijo ewfiajfo jfowiafwjo foejiojef"
  data-bar-border="black"
  data-scale="1.75"
  data-key="0">
</div>
```
![Progress Bar Demo](https://raw.githubusercontent.com/jnwjack/progress-bar-with-steps/main/demo/demo.gif "Demo")

### Reference
- `data-num-steps` - Number of steps (milestones, checkpoints) along progress bar
- `data-current-step` - Current step on progress bar. This step's circle will be slightly larger and have a different coloration.
- `data-incomplete-color` - Color of fragments of bar that are not complete (after current step).
- `data-complete-color-primary` - Primary color of fragments of bar that are complete (before current step).
- `data-complete-color-secondary` - Secondary color of fragments of bar that are complete (before current step).
- `data-animation-duration` - Duration (in seconds) of gradient animation between primary and secondary colors of complete bar fragments.
- `data-circle-primary` - Fill color of non-current circles and border color of current circle.
- `data-circle-secondary` - Border color of non-current circles and fill color of current circle.
- `data-text-color` - Color of label text.
- `data-label-text-[i]` - Label text for step i on the progress bar.
- `data-bar-border` - Optional color of border around bar.
- `data-scale` - Scaling factor for all part of progress bar.
- `data-key` - Unique key for progress bar. IMPORTANT: Must be included if using multiple progress bars.
- `data-complete` - If true, entire bar will be treated as completed.

## License
MIT

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