djorgesilva / barra_progresso_animado

Getting Started with the progress bar component

• A progress bar is typically used to display the progress of a long running operation, providing a visual cue that processing is underway.
• The progress bar component is very easy to use, yet very powerful. It will also automatically enable features like auto-resizing when the system supports it.

the progress bar was created using two differents aproach:

• first one: using only HTML5, CSS3.
• second one: ReactJs and Styled Components.

Usage

• There are many ways to use the Progress bar, you can see a few basic examples below.

Usage: the first approach - (HTML5, CSS3)

• using this version is very easy just add the div with the class name "wrapper" with all the inner content and place it in your application.

• after that you need to add the style file (CSS3) in the folder that you prefer, just remember to bind this file in the main file (HTML5) that you have just added in your application.

• the main changes will be made in the CSS3 file binded in the main HTML5 file, just look for the class name of each element and modify the content and appearence in the CSS3 file.

Usage: the second approach - (ReactJS, Styled Components)

• using this version like component, just add the GlobalStyle, img and style.app.ts files in the source of your React Application, after that copy all the content from the App.tsx and place in the right position in yout code.

• GlobalStyles: the file have all the main (Global) styles for the component.

• img: the file have the image used in the component.

• style.app.ts: the file have all the styles applied in the component using styled components.

Observation

• there is no need to install any external package to use any version of this progress bar.