Tạo bộ tải (preloader) với CSS

Preloader (bộ tải trước) là hiệu ứng hiển thị khi trang web đang tải nội dung. Dưới đây là cách tạo một preloader xoay tròn đơn giản chỉ với CSS:

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .loader {
      border: 16px double #ffee00;
      border-radius: 50%;
      border-top: 16px solid #7434db;
      width: 140px;
      height: 140px;
      animation: loader 2s linear infinite;
    }
    @keyframes loader {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <h1>Ví dụ Preloader</h1>
  <div class="loader"></div>
</body>
</html>

Kết quả

Một vòng tròn xoay tròn với viền kép màu vàng và phần trên màu tím, quay liên tục 360 độ trong 2 giây.

Tùy chỉnh

• Thay đổi border-top để thay màu phần quay
• Điều chỉnh width/height để thay kích thước
• Thay đổi animation-duration để tăng/giảm tốc độ quay