Здравствуйте,
Я хочу поделиться серией постов, содержащих некоторые советы по Beercss. Beercss — это новый фреймворк, основанный на Material Design 3 (не ограничиваясь им). Material Design 3 — это система дизайна, созданная Google. В этом посте мы узнаем о пользовательском прогрессбаре. Логика работы прогрессбара очень проста.
1) Вам нужно поместить элемент прогресса внутри другого элемента.
<*>
<div class="progress"></div>
</*>
2) Не забудьте изменить направления и цвета.
<*>
<div class="progress left|right|top|bottom green|red"></div>
</*>
3) Для изменения значения вызовите функцию javascript.
ui('#my-progressbar', 30);
4) Вот и все, смотрите этот пример на Codepen
Надеюсь, вам понравится 🍺