Tiếp tục mang đến cho các bạn một mẫu loader bằng CSS3 và lần này là với kiểu thiết kế radar đẹp mắt.
Download
HTML
Các bạn chỉ cần đoạn html sau để tạo loader.
<div class="Radar"></div>
CSS
Tiếp theo thì các bạn chỉ việc copy toàn bộ đoạn css bên dưới dể tạo hiệu ứng preloader này.
.Radar {
width: 75px;
height: 75px;
position: relative;
background: #FFF;
margin: 0 auto;
overflow: hidden;
border-radius: 50%;
background: -webkit-gradient(linear, left top, right top, color-stop(10%, #2BA0C7), color-stop(40%, rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(left, #2BA0C7 10%, rgba(255, 255, 255, 0) 40%);
background: linear-gradient(to right, #2BA0C7 10%, rgba(255, 255, 255, 0) 40%);
-webkit-animation: spinit 1.4s infinite linear;
animation: spinit 1.4s infinite linear;
}
.Radar:before {
width: 50%;
height: 50%;
background: #FFF;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.Radar:after {
background: #fff;
width: 75%;
height: 75%;
border-radius: 999px;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.6;
}
@-webkit-keyframes spinit {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinit {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}