Share hiệu ứng loading 7 sắc cầu vòng đẹp với CSS3

Code hiệu ứng loading xtgem

Hôm nay zcode.mobie.in 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.

CSS

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

Copy Code:

*,
*::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.

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

Tập tin đính kèm

Share hiệu ứng loading 7 sắc cầu vòng đẹp với CSS3

Code hiệu ứng loading xtgem

Code random và hiệu ứng chữ rơi 3D bằng css3

Code loading sặc sỡ cho ai thích màu mè

Code nút bấm menu góc màn hình Pro

Share code hiệu ứng ảnh cực đẹp cho wap/web

Share code tạo chữ nhiều hiệu ứng đẹp