Skip to main content

Tạo CSS Loading Animation

Chọn từ nhiều animation loading CSS và lấy mã. Tùy chỉnh màu sắc, kích thước và tốc độ cho spinner, chấm, thanh và nhiều hơn nữa.

20px80px
0.5s3.0s
<div class="loader-spinner"></div>
.loader-spinner {
  width: 40px;
  height: 40px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3B82F6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
Chia sẻ công cụ
📖

Cách sử dụng

Step 1

Chọn loader

Chọn loader

Chọn thiết kế loader bạn muốn

Step 2

Tùy chỉnh

Tùy chỉnh

Điều chỉnh màu sắc và kích thước

Step 3

Sao chép

Sao chép

Sao chép mã HTML/CSS

Tính năng

Nhiều thiết kế

Spinner, chấm, thanh và nhiều loại khác

Tùy chỉnh được

Điều chỉnh màu sắc, kích thước và tốc độ

Sao chép & Dán

Sao chép HTML+CSS trực tiếp để sử dụng

FAQ

Spinner, chấm, thanh, vòng, nhấp nháy và nhiều loại khác.