Tạo loader 7 sắc cầu vòng với CSS3

Cập nhật: Lượt xem: 639 [ Css ]

Chào các bạn ! 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.

Tạo loader 7 sắc cầu vòng với CSS3

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 !