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

Chào các bạn ! Đã lâu lắm rồi mình mới có thể post thêm một bài viết mới cho 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.

Xem Demo | Download

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;
  awidth: 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 {
  awidth: 80px;
  height: 80px;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  awidth: 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 !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster