Tạo thanh loading ngang với HTML và CSS

DEMO

Thanh loading là một phần không thể thiếu trong các web hiện nay. Trong bài viết này, freetuts sẽ giới thiệu cách tạo một thanh loading ngang với hiệu ứng đẹp chỉ dùng HTML và CSS. Sau bài viết này chúng ta học được cách tạo ra thanh loading như hình.

1. Phần HTML

Trước tiên cần phải có một bố cục hợp lý cho thanh loading, việc xây dựng bố cục rất quan trọng. Nó giúp định hình cách sắp xếp vị trí nội dung thông qua HTML.

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

Trong thẻ body, gồm có 2 thẻ div lồng vào nhau. Thẻ div cha có class là loading và thẻ div con có class là bar.

Mục đích của việc chia 2 thẻ div là nhằm cho việc canh dọc và ngang tiện hơn, ít phụ thuộc vào thẻ chính body.

2. Phần CSS

Tiếp theo sẽ là phần tạo hiệu ứng và trang trí lại các thành phần với các thuộc tính của CSS.

Code CSS Full RUN
body {
  height: 500px;
}

@keyframes progress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

div.loading {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 23;
}

div.bar {
  position: relative;
  height: 50px;
  width: 500px;
  border: 2px solid green;
  background-color: transparent;
  
}

div.bar::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background-color: black;
  animation: progress 5s infinite;
}

div.bar::after {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  content: 'Please Wait ...';
  text-align: center;
  mix-blend-mode: difference;
  color: white;
  text-transform: uppercase;
  font-weight: 800;
}

Bước 1: tạo thiết lập thuộc tính cho thẻ body

body {
  height: 500px;
}

Bước 2: tạo các thuộc tính cho class loading bar

div.loading {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 23;
}

div.bar {
  position: relative;
  height: 50px;
  width: 500px;
  border: 2px solid green;
  background-color: transparent;
  
}

Bước 3: tạo animation progress

@keyframes progress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

Với animation này thì thành loading sẽ di chuyển theo trục ngang, nếu muốn di chuyển theo trục dọc thì chỉ cần sửa lại scaleX thành scaleY

Bước 4: thao tác với before after của class bar

div.bar::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background-color: black;
  animation: progress 5s infinite;
}

div.bar::after {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  content: 'Please Wait ...';
  text-align: center;
  mix-blend-mode: difference;
  color: white;
  text-transform: uppercase;
  font-weight: 800;
}

Đối với class bar các Pseudo: before và after để tao hiệu ứng.

Cả before và after đều dùng thuộc tính position: absolute, để thuộc tính này có tác dụng thì trong class bar phải khai báo position: relative.

Hiệu ứng progress được gán vào before và sẽ được lập lại vô số lần do khai báo giá trị infinite trong thuộc tính animation. Để thanh loading chạy từ trái sang phải thì ta gán transform-origin: left , nếu muốn dị chuyển ngược lại thì chỉ cần đổi left thành right

Bước 5: các lưu ý

Một lưu ý là để kiểu chữ đẹp và canh giữa theo dọc và ngang thì ta thêm và các thuộc tính sau trong Pseudo after.

{
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 800;
}

Một lưu ý khác là trong Pseudo after, thuộc tính mix-blend-mode được khai báo là difference nhằm mục đích tạo hiệu ứng đổi màu chữ khi thanh trượt lướt qua.

{
  mix-blend-mode: difference;
}

3. Lời kết

Qua bài viết này, các bạn đã có thể tự tạo cho mình một thanh loading ngang chỉ dùng HTML và CSS. Freetuts hy vọng nó sẽ giúp ích cho trang web của các bạn. Các bạn có thể tùy chỉnh cho thanh loading của mình trở nên bắt mắt hơn với sự phối trộn màu sắc cũng như sử dụng ảnh nền background.

Trong bài viết tiếp theo, freetuts sẽ hướng dẫn việc tạo thanh loading tròn với rất nhiều hiệu ứng.

Hẹn gặp lại trong bài viết tiếp theo.

-------------------#####-------------------

Khóa học nên xem

Nguồn: freetuts.net