創(chuàng)建一個CSS加載旋轉器只需一個div元素作為HTML結構。 2. 使用CSS設置寬高、邊框、圓角和動畫屬性，通過改變邊框顏色和應用360度旋轉動畫實現(xiàn)旋轉效果。 3. 可自定義大小、速度、顏色和邊框粗細以匹配設計需求。 4. 通過flex佈局將旋轉器居中顯示在容器或屏幕中央。最終僅用少量代碼即可實現(xiàn)輕量、兼容現(xiàn)代瀏覽器的加載指示器，適用於AJAX加載、頁面過渡等場景。

Creating a loading spinner with CSS is simple and doesn't require any images or JavaScript. You can build a smooth, animated spinner using just HTML and CSS. Here's how to make a basic circular spinner that you can customize and reuse.

1. Basic HTML Structure

Start with a simple div element that will act as the spinner:

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

That's all the HTML you need — one element to style and animate.

2. Style the Spinner with CSS

Here's a clean, modern spinner using a border and CSS animation:

 .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3; /* Light gray */
  border-top: 4px solid #3498db; /* Blue top for spin effect */
  border-radius: 50%; /* Makes it a circle */
  animation: spin 1s linear infinite; /* Spin animation */
}

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

How it works:

• The border creates a circular outline.
• Only the border-top is colored, so as it rotates, it looks like a spinner.
• The border-radius: 50% ensures it's a perfect circle.
• The animation rotates the element 360 degrees continuously.

3. Customize the Spinner

You can easily tweak the spinner to match your design:

• Size : Change width and height .
• Speed : Adjust the animation duration (eg, 0.5s for faster).
• Colors : Modify border and border-top colors.
• Thickness : Change the border-width .

Example of a smaller, faster spinner:

 .spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #eee;
  border-top: 3px solid #666;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

4. Centering the Spinner (Optional)

To display the spinner in the center of the screen or container:

 .loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
}

And wrap the spinner:

 

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

Final Notes

• This spinner works in all modern browsers.
• It's lightweight and great for AJAX loading states, page transitions, or button loading indicators.
• You can reuse the .spinner class anywhere in your app.

Basically, just two elements (one div and a few CSS lines), and you've got a professional-looking loading spinner.

以上是如何使用CSS創(chuàng)建加載旋轉器？的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！