ạo thanh Loading xoay với HTML và CSS - Học CSS3 căn bản & nâng cao
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, Zaidap.com sẽ hướng ...
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, Zaidap.com 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é.
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. Zaidap.com sẽ giải thích rõ ở phần sau.
2. Phần CSS
Trước hãy cũng lướt qua toàn bộ code CSS.
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, Zaidap.com 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ư Zaidap.com đề 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, Zaidap.com 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.
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.
