Css – Progress bar button

document.getElementById('heartButton').addEventListener('click', function() {
  const heartIcon = document.getElementById('heartIcon');
  const brokenHeartIcon = document.getElementById('brokenHeartIcon');
  const progressBar = document.querySelector('.progress-bar');

  // Hide the heart image and display the broken heart image
  heartIcon.style.display = 'none';
  brokenHeartIcon.style.display = 'block';

  // Animate progress bar
  progressBar.style.width = '100%';

  // Reset button after animation
  setTimeout(function() {
    progressBar.style.width = '0';

    // Toggle back to the original state
    heartIcon.style.display = 'block';
    brokenHeartIcon.style.display = 'none';
  }, 1000); // Change the duration as needed
});

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

button {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #3498db;
  border: none;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
}

.left-section {
  display: flex;
  align-items: center;
}

#heartIcon,
#brokenHeartIcon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

#brokenHeartIcon {
  display: none;
}

.right-section {
  width: 80px;
  height: 30px;
  background-color: #000;
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: #e74c3c;
  transition: width 1s linear;
  /* Use linear transition for smooth animation */
}

<button id="heartButton">
  <div class="left-section">
    <img src="love.png" alt="Heart Icon" id="heartIcon">
    <img src="heartbroken.png" alt="Broken Heart Icon" id="brokenHeartIcon">
  </div>
  <div class="right-section">
    <div class="progress-bar"></div>
  </div>
</button>