Cách tạo Spinner, Loading Animation bằng CSS

Bộ tải (xoay) Spinner hay còn gọi là donut spinner, là một thành phần rất phổ biến trong các trang web hay các ứng dụng web hiện đại vì nó cho người dùng biết rằng nội dung đang tải.

Dưới đây là cách mà bạn có thể tạo một spinner đơn giản bằng HTML và CSS cho riêng mình chỉ trong vài dòng code. Để hình dung kết quả cuối cùng như thế nào thì trước tiên hãy xem demo như thế nào nhé!

Xem Demo

Cách tạo spinner

Điều đầu tiên chúng ta cần làm là tạo ra một thẻ <div></div> trong trang HTML có chứa một class với tên spinner để hiển thị spinner như sau:

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

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

Việc tiếp theo là chúng ta sẽ style cho class spinner bằng css với từng phần dưới đây!

Trước hết, chúng ta sẽ tạo một border là 4px có màu đen, và màu đường viền bên trái border-left-color: transparentborder-left-color: transparent tức là độ trong suốt (với demo trên thì chúng ta không sử dụng transparent mà ta sử dụng màu #e3116c). Tiếp theo, sử dụng border-radius để làm cong đường viền này.

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  border-radius: 50%;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  border-radius: 50%;
}

Chúng ta sử dụng một hình vuông với chiều cao (height) và chiều rộng (width) là 36px. Và với border-radius: 50%border-radius: 50% như vậy ta có được kết quả là 1 hình tròn trong suốt.

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

Tiếp theo, sẽ thêm một hiệu ứng động amination với tên là spin, thời gian kéo dài trong vòng 1s (một giây), giá trị linear làm chuyển động sẽ cùng tốc độ từ lúc bắt đầu cho đến khi kết thúc (demo ở trên là ta sử dụng giá trị ease) và chuyển động infinite sẽ được thực hiện lặp đi lặp lại không giới hạn số lần.

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
 
  animation: spin 1s linear infinite;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
 
  animation: spin 1s linear infinite;
}

Cuối cùng, chúng ta sẽ tạo một chuyển động animation bằng cách sử dụng @keyframes. Bắt đầu tại một điểm (điểm bắt đầu là 0% với thuộc tính của transform là rotate(0deg)) và cuối cùng chúng ta sẽ xoay hoàn toàn spinner 100% nó với rotate(360deg)

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

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

Vậy là xong! và chúng ta đã có được kết quả cuối cùng như demo phía trên! Bạn có thể tìm hiểu thêm trên google có rất nhiều các hình dạng kiểu tải trang khác nhau với từ khóa css spinner 🌀

Xem thêm

• Beautifully simple click-to-copy CSS effects: Một bộ sưu tập các hiệu ứng được tạo bở HTML và CSS được thiết kế với trọng tâm là tính linh hoạt, đơn giản và dễ sử dụng. Hoàn toàn mã nguồn mở và được MIT cấp phép.