Custom Progressbar - Beer CSS Tips #1

#css #tutorial #html #javascript

Hello,

I want to share a serie of posts containing some tips of Beer CSS. Beer CSS is a new framework around, based on (not restricted to) Material Design 3. Material Design 3 is a design system created by Google. In this post, we will learn about custom progressbar. The logic of progressbar is very simple.

If you don't known the concept of settings, elements and helpers used by Beer CSS, you can read this page.

1) You need to place a progress element inside another element.

<*>
  <progress class="max"></progress>
</*>

2) Do not forget to change the direction helpers like horizontal (default) or vertical.

<*>
  <progress class="max vertical"></progress>
</*>

3) You can apply a color helper too.

<*>
  <progress class="max green-text"></progress>
</*>

The helpers of Beer CSS can be used in any element. This makes the framework very customizable. It has the same logic and names in all ways. This makes the Beer CSS very easy to understand and reuse. I made a codepen here.

Hope you enjoy 🍺

Beer CSS:
https://www.beercss.com

Material Design 3:
https://m3.material.io/

Codepen:
https://codepen.io/leo-bnu/pen/poLeoQa

About settings, elements and helpers used by Beer CSS:
https://github.com/beercss/beercss/blob/main/docs/INDEX.md