Hướng dẫn tạo Loader 7 sắc cầu vòng với CSS3

Xem: 431    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

8 điểm   ( 2 đánh giá ) File đã được kiểm thử


Hôm nay mình sẽ mang đến cho các bạn một hiệu ứng loading cực pro cho các trang web hay blog mà các bạn đang sở hữu , với chỉ vài dòng css đơn giản.

HTML

Đầu tiên thì vẫn là khung chuẩn html cho hiệu ứng loading.

<div id="container">
<div class="item" id="i1"></div>
<div class="item" id="i2"></div>
<div class="item" id="i3"></div>
<div class="item" id="i4"></div>
<div class="item" id="i5"></div>
<div class="item" id="i6"></div>
<div class="item" id="i7"></div>
<div class="item" id="i8"></div>
<div class="item" id="i9"></div>
<div class="item" id="i10"></div>
</div>

CSS

Và các bạn chỉ việc copy thêm đoạn css sau vào bên dưới.

*,
*::after,
*::before {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
 
body {
  perspective: 2000px;
  height: 100vh;
  width: 100vw;
  margin: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #7EC0EE 200%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Roboto';
  font-weight: 300
}
 
#container {
  width: 80px;
  height: 80px;
}
 
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 10px;
  background: hsla(0, 75%, 50%, 0.5);
  margin: -5px 0 0 -30px;
  animation: rot 5s infinite;
}
 
#i2 {
  animation-delay: 0.12s;
  background: hsla(36, 100%, 70%, 0.5);
}
 
#i3 {
  animation-delay: 0.24s;
  background: hsla(72, 100%, 70%, 0.5);
}
 
#i4 {
  animation-delay: 0.36s;
  background: hsla(108, 100%, 70%, 0.5);
}
 
#i5 {
  animation-delay: 0.48s;
  background: hsla(144, 100%, 70%, 0.5);
}
 
#i6 {
  animation-delay: 0.60s;
  background: hsla(180, 100%, 70%, 0.5);
}
 
#i7 {
  animation-delay: 0.72s;
  background: hsla(216, 100%, 70%, 0.5);
}
 
#i8 {
  animation-delay: 0.84s;
  background: hsla(252, 100%, 70%, 0.5);
}
 
#i9 {
  animation-delay: 0.96s;
  background: hsla(288, 100%, 70%, 0.5);
}
 
#i10 {
  animation-delay: 1.08s;
  background: hsla(324, 100%, 70%, 0.5);
}
 
@keyframes rot {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

Vậy là xong, mình mong các bạn có thể áp dụng thành công hiệu ứng này trong các website của mình.

Chúc các bạn thành công !

Hướng dẫn tạo Loader 7 sắc cầu vòng với CSS3

Hướng dẫn tạo Loader 7 sắc cầu vòng với CSS3 Đăng ngày 05-10-2016  Hôm nay mình sẽ mang đến cho các bạn một hiệu ứng loading cực pro cho các trang web hay blog mà các bạn đang sở hữu , với chỉ vài dòng css đơn giản. 4/10 431

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn