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.
-
copy
src/styles.cssinto 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-barsclass name is crucial, keep it please;
- if you use Typescript, you should copy
src/progress.tsto your code; - if you use JavaScript, you should copy code from
src/scripts.jsor 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