Tạo hiệu ứng loading 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.

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

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, ChiaseIT.Mobie.In 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 !

Download