Chia sẻ Loading dạng tần số được tạo bằng CSS Animation

views

A+A-

PrintEmail

Thay vì dùng ảnh động Gif Loading chúng ta sẽ sử dụng CSS Animation để tạo ra những hiệu ứng Loading đẹp và góp phần tăng tốc cho website.

Lời nói đầu

Có lẽ không ít lần các bạn sẽ đau đầu về việc lựa chọn ảnh spinner, loading để sử dụng. Như các bạn cũng biết, đối với ảnh về loading hay spinner thì thường định dạng gif, mà những ảnh gif này phải có nền nếu không trông sẽ khá nham nhở. Tuy nhiên, nếu sử dụng những ảnh loading gif có nền thì độ thẩm mỹ sẽ bị giảm đi khá nhiều. Vậy giải pháp gì để có thể tạo những loading, spinner có nền transparent, nâng cao độ thẩm mỹ cho site của bạn? Câu trả lời ở đây là chúng ta sẽ dùng HTML, CSS3 để tạo các animation loading, spinner thay vì sử dụng các ảnh gif. Những tiện lợi khi dùng HTML.
Lợi ích khi sử dụng CSS3 để thay thế cho hình ảnh
Giảm số lượng HTTP Request, giúp website của bạn load nhanh hơn.
Dễ dàng thay đổi màu sắc, kích thước trong các trường hợp khác nhau
Sử dụng CSS3 như transition, transform, text-shadow giúp các icon loading được linh hoạt hơn.
Sau một thời gian lang thang trên internet, mình đã sưu tầm được một số cách tạo loading, spinner animation trên codepen. Vậy nên, hôm nay mình sẽ chia sẻ những đoạn code khá hay này cho các bạn. Do số lượng cũng kha khá nên mình sẽ chia làm nhiều phần cho các bạn dễ theo dõi hơn nhé.

Loading Kiểu Tần Số Được Tạo bằng CSS3

Những gì bạn thấy dưới đây không phải là một ảnh động dạng .gif mà hoàn toàn được tạo ra bằng CSS. Điều này góp phần giúp giảm tải tài nguyên cho website của bạn, qua đó sẽ giúp website của bạn được mượt và nhanh hơn

Hướng dẫn

Bước 1: Thêm code HTML
Mẹo: Bấm nút để copy code

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Bước 2: Thêm Css như dưới đây

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

html, body {
  min-height: 100%;
}

body {
  background: radial-gradient(#eeeeee, #444444);
}

.loader {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 175px;
  height: 100px;
}
.loader span {
  display: block;
  background: #ccc;
  width: 7px;
  height: 10%;
  border-radius: 14px;
  margin-right: 5px;
  float: left;
  margin-top: 25%;
}
.loader span:last-child {
  margin-right: 0px;
}
.loader span:nth-child(1) {
  animation: load 2.5s 1.4s infinite linear;
}
.loader span:nth-child(2) {
  animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(3) {
  animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(4) {
  animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(5) {
  animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(6) {
  animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(7) {
  animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(8) {
  animation: load 2.5s 0s infinite linear;
}
.loader span:nth-child(9) {
  animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(10) {
  animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(11) {
  animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(12) {
  animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(13) {
  animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(14) {
  animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(15) {
  animation: load 2.5s 1.4s infinite linear;
}

@keyframes load {
  0% {
    background: #ccc;
    margin-top: 25%;
    height: 10%;
  }
  50% {
    background: #444;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background: #ccc;
    height: 10%;
    margin-top: 25%;
  }
}

Còn bạn nào sử dụng SCSS thì như sau

@import "compass/css3";

$speed: 2.5s;

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

html,
body {
  min-height: 100%;
}

body {
  background: radial-gradient(#eee, #444);
}

.loader {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 175px;
  height: 100px;
  span {
    display: block;
    background: #ccc;
    width: 7px;
    height: 10%;
    border-radius: 14px;
    margin-right: 5px;
    float: left;
    margin-top: 25%;
    &:last-child {
      margin-right: 0px;
    }
    &:nth-child(1) {
      animation: load $speed 1.4s infinite linear;
    }
    &:nth-child(2) {
      animation: load $speed 1.2s infinite linear;
    }
    &:nth-child(3) {
      animation: load $speed 1s infinite linear;
    }
    &:nth-child(4) {
      animation: load $speed 0.8s infinite linear;
    }
    &:nth-child(5) {
      animation: load $speed 0.6s infinite linear;
    }
    &:nth-child(6) {
      animation: load $speed 0.4s infinite linear;
    }
    &:nth-child(7) {
      animation: load $speed 0.2s infinite linear;
    }
    &:nth-child(8) {
      animation: load $speed 0s infinite linear;
    }
    &:nth-child(9) {
      animation: load $speed 0.2s infinite linear;
    }
    &:nth-child(10) {
      animation: load $speed 0.4s infinite linear;
    }
    &:nth-child(11) {
      animation: load $speed 0.6s infinite linear;
    }
    &:nth-child(12) {
      animation: load $speed 0.8s infinite linear;
    }
    &:nth-child(13) {
      animation: load $speed 1s infinite linear;
    }
    &:nth-child(14) {
      animation: load $speed 1.2s infinite linear;
    }
    &:nth-child(15) {
      animation: load $speed 1.4s infinite linear;
    }
  }
}

@keyframes load {
  0% {
    background: #ccc;
    margin-top: 25%;
    height: 10%;
  }
  50% {
    background: #444;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background: #ccc;
    height: 10%;
    margin-top: 25%;
  }
}

Chuyên Mục : Chia sẻ CSS Hiệu ứng CSS Loader Css Loading Css Thiết kế website