DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Beercss tips #1: Custom progressbar
Leonardo Rafael Wehrmeister
Leonardo Rafael Wehrmeister

Posted on • Originally published at beercss.com

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

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

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

3) To change the value call a javascript function.

ui('#my-progressbar', 30);
Enter fullscreen mode Exit fullscreen mode

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

Image description

Hope you enjoy ๐Ÿบ

Top comments (0)

๐ŸŒš Browsing with dark mode makes you a better developer.

It's a scientific fact.