DEV Community

Cover image for Custom Progressbar - Beer CSS Tips #1
Leonardo Rafael Wehrmeister
Leonardo Rafael Wehrmeister

Posted on • Updated on • Originally published at beercss.com

Custom Progressbar - Beer CSS Tips #1

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>
</*>
Enter fullscreen mode Exit fullscreen mode

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

<*>
  <progress class="max vertical"></progress>
</*>
Enter fullscreen mode Exit fullscreen mode

3) You can apply a color helper too.

<*>
  <progress class="max green-text"></progress>
</*>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)