Mẫu Radar Preloader với CSS3

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.

Xem Demo | 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 {
  awidth: 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 {
  awidth: 50%;
  height: 50%;
  background: #FFF;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: ';
}
.Radar:after {
  background: #fff;
  awidth: 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 !

Chuyên Mục: Css

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