Tạo loader bằng CSS cực đẹp

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

Hôm nay mình tiếp tục giới thiệu cho các bạn một hiệu ứng cũng đẹp không kém khác, với hiệu ứng này, các bạn có thể áp dụng nhiều cho các dự án web hay dùng cho blog của mình.

Tạo loader bằng CSS cực đẹp

Trước đây Laptrinhweb đã giới thiệu cho các bạn nhiều hiệu ứng tạo loader bằng CSS thuần như  Hiệu ứng loading theo kiểu Windows phone với CSS3  . Hôm nay mình tiếp tục giới thiệu cho các bạn một hiệu ứng cũng đẹp không kém khác, với hiệu ứng này, các bạn có thể áp dụng nhiều cho các dự án web hay dùng cho blog của mình.

HTML

<div class="container">
  <div class="part"></div>
  <div class="part"></div>
  <div class="part"></div>
  <div class="part"></div>
  <div class="part"></div>
</div>

CSS

Và sau đây là toàn bộ đoạn code css giúp các bạn tạo hiệu ứng loading đẹp mắt.

html {
  height: 100%;
  min-height: 100%;
}
body {
  height: 100%;
  background: #51b8e2;
}
.container {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  
}
.container .part {
  width: 40px;
  height: 40px;
  margin-left: 45px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  background: #51b8e2;
  border-radius: 4px;
  border: 2px solid #fff;
  -webkit-transition: background 100ms linear;
          transition: background 100ms linear;
  -webkit-animation: change 950ms linear infinite;
          animation: change 950ms linear infinite;
}
.container .part:nth-child(1) {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.container .part:nth-child(2) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.container .part:nth-child(3) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}
.container .part:nth-child(4) {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.container .part:nth-child(5) {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}
@-webkit-keyframes change {
  0% {
    border-radius: 4px;
  }
  17.5% {
    border-radius: 4px;
  }
  50% {
    border-radius: 100%;
    background: rgba(255,255,255,0.4);
  }
  93.5% {
    border-radius: 4px;
  }
  100% {
    border-radius: 4px;
  }
}
@keyframes change {
  0% {
    border-radius: 4px;
  }
  17.5% {
    border-radius: 4px;
  }
  50% {
    border-radius: 100%;
    background: rgba(255,255,255,0.4);
  }
  93.5% {
    border-radius: 4px;
  }
  100% {
    border-radius: 4px;
  }
}

Chắc chắn là qua bài viết này, các bạn sẽ có thêm một lựa chọn cho trang web của mình, cũng như học thêm nhiều thủ thuật về css để có thể tự tay sáng tạo thêm nhiều hiệu ứng khác cho riêng mình.

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