Ấn tượng với mẫu Circle Loading bằng CSS3

Tiếp tục mang đến cho các bạn thêm một mẫu loading được làm hoàn toàn bằng CSS3, đây sẽ là một lựa chọn khá đẹp cho trang web hay blog của các bạn. Thông qua bài viết này, các bạn sẽ học thêm được rất nhiều về cách sử dụng các thuộc tính của CSS3 trong việc tạo một hiệu ứng động.

Xem Demo | Download

HTML

Trước hết ,chúng ta cần có khung chuẩn html như sau :

<ul class="loader">
  <li>
    <div class="circle"></div>
    <div class="ball"></div>
  </li>
  <li>
    <div class="circle"></div>
    <div class="ball"></div>
  </li>
  <li>
    <div class="circle"></div>
    <div class="ball"></div>
  </li>
  <li>
    <div class="circle"></div>
    <div class="ball"></div>
  </li>
  <li>
    <div class="circle"></div>
    <div class="ball"></div>
  </li>
</ul>

CSS

Các bạn chỉ việc copy toàn bộ đoạn css bên dưới để tạo hiệu ứng loading.

.loader {
  awidth: 250px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px -125px;
  list-style-type: none;
}

.loader li {
  float: left;
  position: relative;
}

.circle {
  awidth: 40px;
  height: 40px;
  border-radius: 0 0 50% 50%;
  border: 4px solid #fff;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.ball {
  position: absolute;
  content: "";
  awidth: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 100%;
  background: #fff;
  box-shadow: 0 -15px 0 0 rgba(255, 255, 255, 0.15), 0 -10px 0 0 rgba(255, 255, 255, 0.10), 0 -5px 0 0 rgba(255, 255, 255, 0.05);
}

.circle {
  -webkit-animation: rotate 1.5s cubic-bezier(0.45, 0, 1, 1) infinite;
  animation: rotate 1.5s cubic-bezier(0.45, 0, 1, 1) infinite;
}

.ball {
  -webkit-animation: fall 1.5s cubic-bezier(0.95, 0, 1, 1) infinite;
  animation: fall 1.5s cubic-bezier(0.95, 0, 1, 1) infinite;
}

.loader li:nth-child(1) div {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.loader li:nth-child(2) div {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.loader li:nth-child(3) div {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

.loader li:nth-child(4) div {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

.loader li:nth-child(5) div {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}

@keyframes rotate {
  0%, 20% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  0%, 20% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes fall {
  0%, 20% {
    transform: translatey(-30px);
    opacity: 0;
  }
  20%,
  24%,
  27%,
  30%,
  50%,
  75% {
    transform: translatey(0px);
    opacity: 1;
  }
  22% {
    transform: translatey(-10px)
  }
  25% {
    transform: translatey(-6px)
  }
  28% {
    transform: translatey(-2px)
  }
  30% {
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.3);
  }
  75%,
  100% {
    box-shadow: 0 -15px 0 0 rgba(255, 255, 255, 0.15), 0 -10px 0 0 rgba(255, 255, 255, 0.10), 0 -5px 0 0 rgba(255, 255, 255, 0.05);
    transform: translatey(30px);
    opacity: 0;
  }
}

@-webkit-keyframes fall {
  0%, 20% {
    -webkit-transform: translatey(-30px);
    opacity: 0;
  }
  20%,
  24%,
  27%,
  30%,
  50%,
  75% {
    -webkit-transform: translatey(0px);
    opacity: 1;
  }
  22% {
    -webkit-transform: translatey(-10px)
  }
  25% {
    -webkit-transform: translatey(-6px)
  }
  28% {
    -webkit-transform: translatey(-2px)
  }
  30% {
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.3);
  }
  75%,
  100% {
    box-shadow: 0 -15px 0 0 rgba(255, 255, 255, 0.15), 0 -10px 0 0 rgba(255, 255, 255, 0.10), 0 -5px 0 0 rgba(255, 255, 255, 0.05);
    -webkit-transform: translatey(30px);
    opacity: 0;
  }
}

Mong rằng các bạn sẽ có thể tìm được nhiều điều bổ ích từ bài viết này.

Chuyên Mục: Css

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