Мобильная версияМне нужен этот тип анимированной кнопки прогресса:
в левой части кнопки появится изображение сердца, а правая часть будет пустой для индикатора выполнения. Если мы нажмем на изображение сердца, изображение должно измениться, и панель prgress загрузится из правого раздела.
Я пробовал много раз, но не могу. Вот мой код
document.getElementById('heartButton').addEventListener('click', function() { const heartIcon = document.getElementById('heartIcon'); constbrokenHeartIcon = document.getElementById('brokenHeartIcon'); const ProgressBar = document.querySelector('.progress-bar'); // Скрываем изображение сердца и отображаем изображение разбитого сердца heartIcon.style.display = 'нет'; brokenHeartIcon.style.display = 'блок'; // Анимируем индикатор выполнения ProgressBar.style.width = '100%'; // Кнопка сброса после анимации setTimeout(функция() { ProgressBar.style.width = '0'; // Возвращаемся в исходное состояние heartIcon.style.display = 'блок'; brokenHeartIcon.style.display = 'нет'; }, 1000); // Изменяем продолжительность по мере необходимости }); body { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; высота: 100вх; маржа: 0; } кнопка { положение: относительное; дисплей: гибкий; выровнять-элементы: по центру; цвет фона: #3498db; граница: нет; отступ: 10 пикселей 20 пикселей; цвет: #fff; размер шрифта: 16 пикселей; курсор: указатель; переполнение: скрыто; } .левый-раздел { дисплей: гибкий; выровнять-элементы: по центру; } #сердцеЗначок, #brokenHeartIcon { ширина: 30 пикселей; высота: 30 пикселей; поле справа: 10 пикселей; } #brokenHeartIcon { дисплей: нет; } .right-раздел { ширина: 80 пикселей; высота: 30 пикселей; цвет фона: #000; переполнение: скрыто; } .индикатор { позиция: абсолютная; верх: 0; слева: 0; внизу: 0; ширина: 0; цвет фона: #e74c3c; переход: ширина 1 с линейная; /* Используйте линейный переход для плавной анимации */
