Beercss tips #1: Custom progressbar

Hello,

I want to share a serie of posts containing some tips of Beercss. Beercss 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.

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

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

2) Do not forget to change the directions and colors.

<*>
  <div class="progress left|right|top|bottom green|red"></div>
</*>

3) To change the value call a javascript function.

ui('#my-progressbar', 30);

4) And that's it, see this example at Codepen

Hope you enjoy 🍺