Hướng dẫn tạo hiệu ứng loading với Animation CSS3 đơn giản

Lập Trình Website

Xin chào!

Trong bài viết này tôi sẽ hướng dẫn các bạn tạo hiệu ứng loading với HTML và CSS3 đơn giản như đan cái rổ.. mà đan cái rổ có đơn giản không nhỉ  🙄

Đầu tiên thêm 1 thẻ html để hiển thị hiệu ứng loading

ví dụ:

<div class="loading"><div>

Sau đó thì viết CSS

.loading {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db; /* viền màu xanh */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

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

Demo

Ngoài ra thì có thể tuỳ biến thêm màu viền cho nó thành cái hình tròn ví dụ như:

.loading {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-right: 16px solid green;
border-bottom: 16px solid red;
border-left: 16px solid pink;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

Demo

Trên đây mình đã hướng dẫn anh em tạo hiệu ứng loading bằng css3 rồi đó

Chúc anh em cồng thanh!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *