Đôi lúc khi chúng ta xem các trang web có dung lượng lớn, đặc biệt là những trang chứa nhiều hình ảnh, chúng ta thường bắt gặp hiệu ứng tải trang trước khi các nội dung này được tải xuống. Điều này sẽ giúp cho khách viếng thăm web nhận biết là trang đang được load vào máy. Để hiểu rõ hơn về hiệu ứng này, các bạn có thể xem demo của bài viết.
Có rất nhiều cách để làm hiệu ứng này, hôm nay mình sẽ giúp các bạn tạo hiệu ứng loading với chỉ bằng CSS3 dưới dạng progress bar.
Bước 1 : HTML
Chúng ta sẽ cần bộ khung html mẫu như sau :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Animated Loading Bar</title>
<link rel="stylesheet" href="bar.css">
</head>
<body>
<div class="bar"></div>
</body>
</html>
Bước 2 : Định dạng CSS
Và sau đây là đoạn css giúp chúng ta tạo hiệu ứng tải trang, các bạn chỉ cần copy và sử dụng cho mình .
.bar {
/**
* Hiệu ứng loading se duoc canh giua
*/
position: absolute;
top: 50%;
left: 50%;
height: 20px;
width: 200px;
margin-top: -10px; /* mot nua chieu cao */
margin-left: -100px; /* mot nua chieu rong */
background-image: -webkit-linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
background-image: -moz-linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
background-image: -o-linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
background-image: linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
background-color: #d3d3d3;
background-size: 50px 50px;
border: 1px solid #ff9a1a;
border-bottom-color: #e68100;
border-radius: 20px;
-webkit-box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-o-animation: move 2s linear infinite;
animation: move 2s linear infinite;
}
/**
Tao duong vien xung quanh progess bar
*/
.bar::before {
content: " ";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 20px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
z-index: -1;
}
/**
* Hieu ung
*/
@-webkit-keyframes move {
to { background-position: 50px 50px; }
}
@-moz-keyframes move {
to { background-position: 50px 50px; }
}
@-o-keyframes move {
to { background-position: 50px 50px; }
}
@-webkit-keyframes move {
to { background-position: 50px 50px; }
}
Rất đơn giản và dễ thực hiện phải không các bạn, mình hy vọng các bạn sẽ có nhiều lựa chọn hơn cho web hay blog của mình.