Прогресс бар на webflow — круговой и линией, простая анимация, обучение вебфлоу
#webflow #вебфлоу
Индикатор выполнения — часты гость на сайтах, который показывает прогресс в любой области. Я покажу как делать его круговым без лишних заморочек, а просто и быстро, благодаря определенному лайфхаку.
Так же можно в наш прогресс бар вставить бегущие цифры, которые буду считать синхронно с процессом заполнения бара. Так же, помимо кругового прогресс бара, мы сделаем обычный простой линией.
Они будут показывать нужный нам отрезок или заполнятся на нужный нам процент. Все можно настроить как вам нужно и при этом быстро и просто.
•••••••••••••••••••••••••••••••
— Полезные штуки для webflow — https://freelance-blog.com/webflow/
— Индивидуальное обучение https://freelance-blog.com/study/
•••••••••••••••••••••••••••••••
БЕСПЛАТНЫЕ курсы по webflow:
👉 • Базовый (для новичка) • Трелло для фрилансера, ускоряем свою ...
👉 • Портфолио для фрилансера (уровень средний) • Курс по созданию портфолио в webflow
👉 • Портфолио для студии (уровень сложный) • Бесплатный курс по разработке сайта с...
👉 • Делаем сложный сайт (уровень профи) • Сайт фотографа, бесплатный курс по ве...
•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас — тогда я способен вам помочь! https://freelance-blog.com/study/
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••
Моя почта — [email protected]
Телеграм @artstranger
•••••••••••••••••••••••••••••••
👉 • Портфолио — https://freelance-blog.com/
👉 • Инстаграм — / artstranger.ru
👉 • Бесплатные плюшки — https://freelance-blog.com/webflow/
👉 • Материалы для уроков — https://freelance-blog.webflow.io/
👉 • Индивидуальное обучение — https://freelance-blog.com/study/
•••••••••••••••••••••••••••••••
Таймкоды:
00:00 Демонстрация конечного результата (прогресс бара)
00:46 Готовым область
02:02 Создаем основу для прогресс бара кругового
03:16 Подбираем Lottie анимацию, на сайте https://lottiefiles.com
04:04 Редактируем Lottie анимацию
05:16 Вставляем ее в наш блок и делаем фон
10:55 Показываю как анимировать цифры прогресса
11:35 Проверяем нашу анимацию и ищем новую
13:15 Прописываем анимацию для кругового прогресс бара
14:12 Делаем остальные 3 бара
31:02 Создаем горизонтальный прогресс бар
34:37 Делаем второй бар
37:04 Адаптивим наши бары
40:27 Все готово
Watch video Прогресс бар на webflow — круговой и линией, простая анимация, обучение вебфлоу online, duration hours minute second in high quality that is uploaded to the channel Фриланс прокачка 07 June 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 1,035 times and liked it 41 visitors.
