Tạo thanh Loading xoay với HTML và CSS

Con xoay hay còn gọi là spinner là một hiệu ứng không thể thiếu trong web hiện đại. Gần như bất cứ trang web nào cũng sử dụng hiệu ứng này, nhất là sau các thao tác đăng nhập hoặc đăng ký. Mục đích nhằm mang lại sự tương tác giữa web với người dùng tốt hơn. Trong bài viết này, Freetuts sẽ hướng dẫn các bạn tạo ra con xoay chờ như hình bên dưới. Nào chúng ta cùng bắt đầu nhé.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Phần HTML

Để tạo một spinner đẹp thì phải có bố cục đẹp, việc dàn trang tốt sẽ thu hút nhiều người dùng hơn.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Spiner</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="spiner.css">
  <script src="main.js"></script>
</head>
<body>
  <div>
    <div class="spiner"></div>
    <div class="bar">
      <span class="dot1"></span>
      <span class="dot2"></span>
      <span class="dot3"></span>
    </div>
  </div>
</body>
</html>

Cách bố cục cũng khá đơn giản, chỉ gồm thẻ div và thẻ span và lồng nhau không quá nhiều lớp.

Một lưu ý nhỏ là ở đây chúng ta dùng thẻ span để biễu diễn cho dấm chấm động, chúng ta có thể thay thẻ span bằng thẻ khác như thẻ div. Freetuts sẽ giải thích rõ ở phần sau.

Bài viết này được đăng tại [free tuts .net]

2. Phần CSS

Trước hãy cũng lướt qua toàn bộ code CSS.

Xem demo RUN

body > div {
  height: 500px;
  width: 100%;
  background-color: #002266;
  text-align: center;
}

.spiner {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 10px solid white;
  border-radius: 50%;
  border-top: 10px solid #ff8000;
  animation: spiner 1.5s linear infinite;
}

.bar {
  margin-top: 50px;
  display: inline-block;
  width: 100%;
}
.bar > span {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff8000;
  display: inline-block;
  animation: dot 1.5s ease-in-out infinite both;
}

.bar span.dot1 {
  animation-delay: -0.3s;
}

.bar span.dot2 {
  animation-delay: -0.15s; 
}

.bar span.dot3 {
  animation-delay: 0s;
}

@keyframes spiner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dot {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Sau đây, Freetuts sẽ hướng dẫn và giải thích từng bước thực hiện.

Bước 1: định dạng thẻ div chính

body > div {
  height: 500px;
  width: 100%;
  background-color: #002266;
  text-align: center;
}

Ở đây, ta chú ý đến thuộc tính text-align: center việc gán giá trị này sẽ ảnh hưởng đến cách gán thuộc tính display của các thẻ con.

Bước 2: định dạng cho class spiner và bar

.spiner {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 10px solid white;
  border-radius: 50%;
  border-top: 10px solid #ff8000;
  animation: spiner 1.5s linear infinite;
}

.bar {
  margin-top: 50px;
  display: inline-block;
  width: 100%;
}

Có một lưu ý là thuộc tính display: inline-block như freetuts đề cập ở bước 1. Do thẻ div cha canh nội dung bằng text-align: center nên để tác dụng lên các thẻ con thì phải thiết lập thuộc tính display: inline-block cho các thẻ con tương ứng.

Bước 3: định dạng thẻ span

.bar > span {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff8000;
  display: inline-block;
  animation: dot 1.5s ease-in-out infinite both;
}

.bar span.dot1 {
  animation-delay: -0.3s;
}

.bar span.dot2 {
  animation-delay: -0.15s; 
}

.bar span.dot3 {
  animation-delay: 0s;
}

Thẻ span là phần tạo nên hiện ứng dấu chấm động. Nên điều chắc chắn là cả 3 thẻ span đều dùng chung một loại hiệu ứng. Vấn đề là phải canh chính thời gian trễ sao cho hợp lý để hiệu ứng được mượt và tốc độ vừa phải.

Bước 4: định dạng hiệu ứng

@keyframes spiner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dot {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Sẽ có 2 loại hiệu ứng được tạo ra, spiner là cho vòng xoay, dot là dùng cho dấu chấm động.

Một lưu ý là việc thiết lập các giá trị phần trăm trong hiệu ứng dot có liên qua mật thiết với việc thiết lập thời gian trễ trong từng thẻ span.

3. Lời Kết

Qua bài viết này, freetuts hy vọng giúp các bạn thêm kiến thức để tạo ra hiệu ứng đẹp. Đặc biệt hơn là làm cho trang web trở nên thân thiện hơn với người dùng.

Cảm ơn các bạn. Hẹn gặp lại trong các bài viết sau.

Danh sách file tải về

Tên file tải về	Pass giải nén
Tải mã nguồn bài viết	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Cách sử dụng thẻ script html ...