Прогресс бар на webflow — круговой и линией, простая анимация, обучение вебфлоу

#webflow #вебфлоу
Индикатор выполнения — часты гость на сайтах, который показывает прогресс в любой области. Я покажу как делать его круговым без лишних заморочек, а просто и быстро, благодаря определенному лайфхаку.

Так же можно в наш прогресс бар вставить бегущие цифры, которые буду считать синхронно с процессом заполнения бара. Так же, помимо кругового прогресс бара, мы сделаем обычный простой линией.

Они будут показывать нужный нам отрезок или заполнятся на нужный нам процент. Все можно настроить как вам нужно и при этом быстро и просто.

•••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••

БЕСПЛАТНЫЕ курсы по webflow:

•••••••••••••••••••••••••••••••
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••

Телеграм @artstranger

•••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••

Таймкоды:
00:00 Демонстрация конечного результата (прогресс бара)
00:46 Готовым область
02:02 Создаем основу для прогресс бара кругового
04:04 Редактируем Lottie анимацию
05:16 Вставляем ее в наш блок и делаем фон
10:55 Показываю как анимировать цифры прогресса
11:35 Проверяем нашу анимацию и ищем новую
13:15 Прописываем анимацию для кругового прогресс бара
14:12 Делаем остальные 3 бара
31:02 Создаем горизонтальный прогресс бар
34:37 Делаем второй бар
37:04 Адаптивим наши бары
40:27 Все готово

[freelance-pro]

Таймкоды:
00:00 Демонстрация конечного результата (прогресс бара)
00:46 Готовым область
02:02 Создаем основу для прогресс бара кругового
04:04 Редактируем Lottie анимацию
05:16 Вставляем ее в наш блок и делаем фон
10:55 Показываю как анимировать цифры прогресса
11:35 Проверяем нашу анимацию и ищем новую
13:15 Прописываем анимацию для кругового прогресс бара
14:12 Делаем остальные 3 бара
31:02 Создаем горизонтальный прогресс бар
34:37 Делаем второй бар
37:04 Адаптивим наши бары
40:27 Все готово