进度条按钮

Question

我想要这种类型的动画进度按钮：https://dribbble.com/shots/16005120-Energy-Bar 按钮的左侧部分将有一个心形图像，右侧部分将为进度条留空，如果我们单击心形图像，则图像应该更改，并且进度条将从右侧部分加载。

我已经尝试了很多次，但我不能，这是我的代码

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>

Answer 1

看起来

.progress-bar

有

position: absolute

并且具有相对位置的最接近的父元素是按钮元素。

如果您不希望进度条与整个按钮重叠，则将

postition: relative

添加到

.right-section

可能就可以解决问题