如何用CSS实现按钮中心Spinner加载动画且随宽度自适应居中

Got it, let's fix this spinner centering issue once and for all! The problem with your current setup is that using hardcoded margins or basic absolute positioning doesn't account for changes in the button's width or content. Here's a reliable way to make the spinner stay perfectly centered no matter how the button size shifts:

Core Solution #

The key is to use relative positioning on the button container paired with absolute positioning + transform centering for the spinner. This method ensures the spinner aligns with the button's center dynamically.

Modified Code #

CSS

/* Update button container to act as positioning reference */
.ic2-outlined-btn {
  border-radius: 3px;
  background-color: var(--white-color);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.05);
  font-family: Roboto;
  font-size: 17px;
  font-weight: 500;
  text-align: var(--button-alignment);
  padding: 0px 16px;
  width: auto;
  word-spacing: 8px;
  height:32px;
  position: relative; /* Critical: makes spinner's absolute position relative to the button */
}

.ic2-outlined-spin-blue-btn {
  color: #a3deff;
  border: 1px solid #008ad6;
}

/* Rework spinner positioning for dynamic centering */
.ic2-fa-spin-blue {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  border: 3px solid #008ad6;
  border-radius: 50%;
  border-top: 3px solid #f3f3f3;
  width: 20px;
  height: 20px;
  
  /* Keep your existing animation rules */
  -webkit-animation: ic2-spin 2s linear infinite;
  animation: ic2-spin 2s linear infinite;
  -moz-animation: ic2-spin 2s infinite linear;
  -o-animation: ic2-spin 2s infinite linear;
  
  /* Dynamic centering magic */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Shifts spinner back by half its own size to center it */
}

@-webkit-keyframes ic2-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes ic2-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

HTML (Adjusted to avoid text overlap)

If you want the spinner to be the only visible element during loading, hide the button text (you can toggle this with a class later for state changes):

<button value="Loading" class="ic2-outlined-btn ic2-outlined-spin-blue-btn">
  <span class="ic2-fa-spin-blue"></span>
  <span style="visibility: hidden;">Loading</span>
</button>

Why This Works #

• position: relative on the button tells the spinner's absolute positioning to use the button as its reference frame (instead of the entire page).
• top: 50% and left: 50% move the spinner's top-left corner to the button's center.
• transform: translate(-50%, -50%) shifts the spinner back by half its own width and height, so its exact center matches the button's center. This works even if you change the spinner's size later!

Bonus: Toggle Loading State Cleanly #

For better maintainability, add a CSS class to hide/show text based on loading state:

.ic2-outlined-btn.loading .btn-text {
  display: none;
}

Then update your HTML:

<button value="Loading" class="ic2-outlined-btn ic2-outlined-spin-blue-btn loading">
  <span class="ic2-fa-spin-blue"></span>
  <span class="btn-text">Loading</span>
</button>

Now you can just add/remove the loading class to switch between normal and loading states.

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