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

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.

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.

tao progress bar PNG

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.

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

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 và 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 và 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.

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 ...