Советы Beercss #1: Пользовательский прогрессбар

Здравствуйте,

Я хочу поделиться серией постов, содержащих некоторые советы по 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

Надеюсь, вам понравится 🍺

Оцените статью
devanswers.ru
Добавить комментарий