Прогресс бар на 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 Все готово
Смотрите видео Прогресс бар на webflow — круговой и линией, простая анимация, обучение вебфлоу онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Фриланс прокачка 07 Июнь 2022. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 1,035 раз и оно понравилось 41 посетителям.
