点击触发的圆形按钮边框加载动画实现问题

Alright, let's get that circular loading animation working perfectly for your button. Here's a step-by-step fix tailored to your code:

Step 1: Make the Animation Element Match Your Circular Button #

The <span> inside your button is where the loading animation lives, but right now it's not constrained to the button's circular shape. Let's fix that with some CSS:

/* Style the animation container to match the button's circle */
.btn.btn-outline-warning.btn-round span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit; /* Inherit the button's 50% radius to stay circular */
  border: 2px solid transparent;
  border-top-color: currentColor; /* Use the button's orange color for the loader */
  opacity: 0;
  pointer-events: none; /* Prevent the span from blocking button clicks */
}

Step 2: Adjust Keyframes for Circular Animation #

Instead of square-based animation, we'll create a smooth spinning circular loader that fits your button. Replace any existing keyframes with this:

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Step 3: Add Loading State Styles #

We'll use a .loading class to toggle the animation on and hide the save icon when loading is active:

/* Hide the icon when loading */
.btn.btn-outline-warning.btn-round.loading i {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Show and animate the loader when loading */
.btn.btn-outline-warning.btn-round.loading span {
  opacity: 1;
  animation: spin 1s linear infinite;
  transition: opacity 0.2s ease;
}

Step 4: Trigger Animation on Click with JavaScript #

Add this simple script to make the animation start when the button is clicked, and stop after a simulated loading period:

const saveButton = document.querySelector('.btn.btn-outline-warning.btn-round');

saveButton.addEventListener('click', function() {
  // Activate loading state
  this.classList.add('loading');
  
  // Simulate a 2-second loading process (adjust time as needed)
  setTimeout(() => {
    // Deactivate loading state
    this.classList.remove('loading');
    // Optional: Add a success message or other post-load action here
  }, 2000);
});

Bonus: If You Want a Fill Animation Instead of Spinning #

If you prefer the "fill and fade" effect from the example you referenced, replace the spin keyframes and loading span styles with this:

@keyframes fill {
  0% {
    transform: scale(0);
    opacity: 0.6;
    background-color: currentColor;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.btn.btn-outline-warning.btn-round.loading span {
  opacity: 1;
  animation: fill 0.8s ease-out forwards;
  border: none; /* Remove border for fill effect */
}

This will make a circular orange fill expand from the center of the button when clicked, then fade out.

内容的提问来源于stack exchange，提问作者Aadam