Multi step and dynamic progress bar built with Lit-Element. This webcomponent follows the open-wc recommendation.

Installation

``bash
npm install genk-step-progress-bar --save
`

$3

* Node.js (v18.0.0)
* Lit

Usage

`html



`

$3

#### Required

- steps (Array) - Array of Objects with Badge and/or Label key-values

#### Optional

- activeStep (Number) - Initial active step, 1 by default

$3

#### Colors
`css
--genk-spb-clr-primary
--genk-spb-clr-secondary
--genk-spb-clr-dark
--genk-spb-clr-grey
--genk-spb-clr-light
`

#### Dimensions
`css
--genk-spb-width
--genk-spb-badge-size
`

#### Transitions
`css
--genk-spb-transition-duration
--genk-spb-transition-delay
--genk-spb-transition-timing-function
`

Linting

To scan the project for linting and formatting errors, run

`bash
npm run lint
`

To automatically fix linting and formatting errors, run

`bash
npm run format
`

Testing

To execute a single test run:

`bash
npm run test
`

To run the tests in interactive watch mode run:

`bash
npm run test:watch
`

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo

`bash
npm run start
`

To run a local development server with web-dev-server that serves the basic demo located in demo/index.html`

Contact

Pablo Álamo - LinkedIn - pabloalamovargas@gmail.com

Project Link: https://gitlab.com/pablodevs1/lit-steps-progress-bar