Mẫu Radar Preloader với CSS3

30/09/2015

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.

Mẫu Radar Preloader với CSS3

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 {
  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 !

Tags:

Chuyên Mục:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !