Sự kiện

Tạo loader bằng CSS cực chuẩn

Danh mục: CSS
 

Trước đây mình đã 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 và Tạo hiệu ứng loading theo phong cách Facebook bằng 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.

animation css3, css3, loading, loader, loader by CSS

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.

 



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BÌNH LUẬN

BẢN QUYỀN ®
MANGUON.COM đã đăng kí quyền tác giả: AR1682/GP-STTTP
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"