CSS加載器或旋轉器示例

這是一個純CSS實現的輕量級加載動畫，1. 使用HTML創建一個div容器；2. 通過CSS設置圓形邊框並僅對頂部著色；3. 利用@keyframes動畫持續旋轉元素；4. 可自定義大小、速度和顏色；5. 通過Flex佈局居中顯示；6. 結合JavaScript動態控制顯示與隱藏，適用於表單提交、數據加載等場景，完整且無需外部依賴。

Here's a simple and practical CSS loader (spinner) example you can use in your web projects. It's lightweight, pure CSS, and easy to customize.

? Simple CSS Spinner (Loader)

This spinner is great for showing loading states while content loads (eg, API calls, page transitions).

✅ HTML

 <div class="loader"></div>

✅ CSS

 .loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 50px auto; /* Center it */
}

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

? How It Works

• The spinner uses a circular border with only the top colored — this creates the "spinning" effect.
• animation: spin 1s linear infinite rotates the element continuously.
• You can change:
  • Size: adjust width / height
  • Speed: change 1s to faster ( 0.5s ) or slower
  • Colors: modify border and border-top values

?️ Optional: Centering the Loader on Screen

To center it vertically and horizontally:

 body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

? Use Cases

• Show during form submission
• While fetching data from an API
• On page navigation (single-page apps)
• Inside buttons (eg, "Loading...")

You can wrap it in a container and hide it when not needed:

 .loader-container {
  display: none; /* Show dynamically with JS */
}

.loader-container.active {
  display: block;
}

That's it — a clean, modern spinner with no JavaScript or external libraries needed. Basically just a few lines of CSS.

以上是CSS加載器或旋轉器示例的詳細內容。更多資訊請關注PHP中文網其他相關文章！