Web开发中字符串Spinning-Replacement效果实现方法咨询

Hey Jakob, glad you're looking to implement that spinning-replacement effect—let's break this down into both plugin options and a vanilla JS quick solution to get you started!

If you want something quick and battle-tested, these plugins are solid choices:

• Spin.js: A lightweight, dependency-free library built specifically for spinner effects. You can customize size, color, animation type, and it lets you easily replace a target element's content with a spinner, then destroy it when you're done.
• Loader.js: Comes with a bunch of pre-built spinning animations and supports custom themes. It's super easy to integrate—just a few lines of code to swap your element with a spinner.
• Pure CSS Spinners: Don't sleep on this option! You can create spinning effects entirely with CSS @keyframes (using SVG or div elements). Just toggle a class on your target element to replace its content with the spinner—no JavaScript required for simple use cases.

If you prefer a no-dependency solution, here's a simple setup you can adapt:

First, add this CSS to your stylesheet:

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px; /* Match your element's height */
}
.spinner-circle {
  width: 30px;
  height: 30px;
  border: 3px solid #e0e0e0;
  border-top-color: #2196F3; /* Customize the accent color */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Then use this JavaScript to handle the replacement and restoration:

// Replace target element with spinner
function showSpinner(elementId) {
  const target = document.getElementById(elementId);
  // Save original content to restore later
  target.dataset.originalContent = target.innerHTML;
  
  // Create spinner element
  const spinner = document.createElement('div');
  spinner.className = 'spinner-container';
  spinner.innerHTML = '<div class="spinner-circle"></div>';
  
  // Swap content
  target.innerHTML = '';
  target.appendChild(spinner);
}

// Restore original content
function hideSpinner(elementId) {
  const target = document.getElementById(elementId);
  if (target.dataset.originalContent) {
    target.innerHTML = target.dataset.originalContent;
    delete target.dataset.originalContent;
  }
}

// Example usage:
// showSpinner("myTargetElement");
// hideSpinner("myTargetElement");

This setup lets you swap any element's content with a spinning circle, and easily revert back to the original content when needed. You can tweak the CSS to adjust size, color, animation speed, or even use a different spinner shape (like bars instead of a circle).

Hope either of these paths works for you—let me know if you need help tweaking any part of it!

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