ạo thanh loading ngang với HTML và CSS - Học CSS3 căn bản & nâng cao
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, Zaidap.com 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ó ...
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, Zaidap.com 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.
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. Zaidap.com 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, Zaidap.com 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.
Chuyên đề học lập trình web: Học phần HTML / CSS
Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.
Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đê tại đây.
