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.

css3, preloader, thu thuat css, css co ban, css tips

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

  }

}

 

 

 HỖ TRỢ TRỰC TUYẾN 24/7