Tạo trạng thái Loading hình radar cực chất bằng Css3

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

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.

Tạo trạng thái Loading hình radar cực chất bằng Css3

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);
  }
}

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