A progress bar concept where we grab a <progress />
element and create a multi-element construction under the hood. This construction is easy to use and to style.
![image](https://private-user-images.githubusercontent.com/52240221/289275223-4db1d24f-4719-4f93-8778-16a69abd08c0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1MTU1NTAsIm5iZiI6MTcyMTUxNTI1MCwicGF0aCI6Ii81MjI0MDIyMS8yODkyNzUyMjMtNGRiMWQyNGYtNDcxOS00ZjkzLTg3NzgtMTZhNjlhYmQwOGMwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIwVDIyNDA1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI5N2I3ZTUyZTk0OWJhZDA2NWQzNTRjMDJmYjA4ODVlZjY3MDYzYzdlNGZiODE1ZTU1YzUzNTRjNGRmYmNlNzAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.3XHt-gEyMKsVaxiCvZe0ugE30J4d0oasPc-64gcgeP0)
![image](https://private-user-images.githubusercontent.com/52240221/289284614-ace7cf9d-f3e8-4835-891f-c397c94c1769.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1MTU1NTAsIm5iZiI6MTcyMTUxNTI1MCwicGF0aCI6Ii81MjI0MDIyMS8yODkyODQ2MTQtYWNlN2NmOWQtZjNlOC00ODM1LTg5MWYtYzM5N2M5NGMxNzY5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIwVDIyNDA1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQzZDA2NWRjNDVhMDZjOTQ0OGY2OGU0NDQzZTE2Mzc5OWYyNGU0NWNjNDkzZmZlZmYzNDc1OGNlMzA5YmExZDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ho8GhsjTGdNsnglrAU9_IFHpU22nk3jAcCRnf5umKWU)
-
copy
src/styles.css
into your folder and add it into your HTML code like this:<link rel="stylesheet" href="src/style.css">
-
if you don't need all the file, you should copy all the CSS code from the file after:
/* PROGRESS STYLES: YOU NEED THEM!!! */
and before Example #1 styles marked like that:
/* EXAMPLE #1 */
and insert in your own styles file. Also copy styles of example you prefer or you could write your own;
- add
<progress />
into your code like this:<!-- there can be example 1-4 classname if you want predefined styles or your own classname or your own classname. --> <div class="example-1 progress-bars"> <progress max="100" value="25" data-title="SEO">25%</progress> <progress max="100" value="50" data-title="Graphic Design">50%</progress> ... <!-- there could be as many bars as you need --> </div>
- all the
<progress />
attributes are crucial and you should add all of them; progress-bars
class name is crucial, keep it please;
- if you use Typescript, you should copy
src/progress.ts
to your code; - if you use JavaScript, you should copy code from
src/scripts.js
or import the whole file to your HTML:<html> <head></head> <body> <!-- all your HTML code --> <script type="module" src="/src/scripts.js"></script> </body> </html>
- call the init function:
setProgressBars({ // here you should provide a parent progress bars container (it can be not only direct parent, but an ancestor any level above) parentSelector: ".your-parent-selector", //can be classname or id // optional parameter: a classname which will be applied to progress bar parent container for convenient theming // if you want to use predefined styles, you should use it like "example-1__progress" (1 - 4) className: "example-4__progress", });
- HTML5
- CSS3
- JS (ES6+)
- Vite
- install dependencies
npm install
// or
yarn
- start local server via Vite
npm start dev
// or
yarn dev