Progress Bar example

This small projects is a quick reference to show a progress bar. CSS courtesy of Brad Traversy.

Getting Started

First of all, make sure you've installed Node.

Then install dependencies:

$ yarn

Workflow

Start a local development server:

$ yarn start

Access invoicing under http://localhost:3000/

Format code:

$ yarn format

Lint code:

$ yarn lint

Commit changes:

$ yarn commmit

Notes

1.- When using css-modules we need to find the classes in DOM as follow:

document.querySelectorAll<HTMLElement>(`.${classes.circle}`);

Without css-modules:

document.querySelectorAll<HTMLElement>(`.circle`);

2.- The initial load of DOM elements must be put inside a useEffect to ensure they are available before render. useEffect with an empty dependencies array as a second argument, will ensure that the callback function will be called after the component renders for the first time.