CSS教程，用於創建加載旋轉器和動畫

創建CSS加載旋轉器的方法有三種：1. 使用邊框的基本旋轉器，通過HTML和CSS實現簡單動畫；2. 使用多個點的自定義旋轉器，通過不同延遲時間實現跳動效果；3. 在按鈕中添加旋轉器，通過JavaScript切換類來顯示加載狀態。每種方法都強調了設計細節如顏色、大小、可訪問性和性能優化的重要性，以提升用戶體驗。

Creating loading spinners with CSS is a straightforward way to enhance user experience while content loads. You don't need JavaScript for simple animations — just HTML and CSS. Below are practical methods to build basic and customizable spinners.

Basic Spinner Using Borders

One of the simplest ways to create a spinner is by using a bordered element and rotating it with CSS animation.

HTML:

 <div class="spinner"></div>

CSS:

 .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

• The border creates the ring shape.
• border-top-color gives the "loading" effect with a contrasting color.
• The spin keyframe rotates the element infinitely.

This method works well for small, subtle loaders.

Custom Spinner with Multiple Dots

If you want something more visual than a rotating circle, consider animating multiple dots that appear one after another.

HTML:

 <div class="dot-spinner">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS:

 .dot-spinner {
  display: flex;
  gap: 5px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 50%;
  animation: bounce 1.2s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

• Each dot scales in and out at slightly different times.
• This staggered animation gives a pulsing or bouncing effect.
• You can change the number of dots or adjust timing for different styles.

This type of spinner is great for modern UIs where subtle motion adds personality.

Adding Animation to Buttons

Sometimes you want to show a spinner inside a button when an action is processing.

HTML:

 <button class="loading-btn">
  <span class="btn-text">Submit</span>
  <span class="spinner"></span>
</button>

CSS (partial):

 .loading-btn .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
}

.loading-btn.loading .spinner {
  display: inline-block;
}

.loading-btn.loading .btn-text {
  opacity: 0;
}

• When the button has a loading class, the spinner appears and the text fades out.
• You'd toggle the class using JavaScript when triggering an async action.

This approach keeps your interface responsive and gives feedback during actions like form submission.

Tips for Customization

Here are some quick tips to make your spinners work better:

• Use semantic colors : Match the spinner color to your theme or brand.
• Keep it small : Spinners shouldn't dominate the screen unless necessary.
• Consider accessibility : Add ARIA attributes if needed ( aria-busy , role="status" ).
• Optimize performance : Avoid overcomplicated animations that may slow down rendering.

You can mix these techniques or layer them depending on your project's needs.

That's basically how you create and customize spinners with just CSS. It's not complicated, but getting the details right makes a difference in how smooth and professional your interface feels.

以上是CSS教程，用於創建加載旋轉器和動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！