- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Bằng cách sử dụng CSS3 tôi sẽ hướng dẫn các bạn tạo thanh hiệu ứng Indeterminate Preloader một cách đơn giản. Các bạn thực hiện các bước như sau:
1. Tạo cấu trúc thư mục chứa mã nguồn như sau:
2. Mở tập tin css/style.css và nhập vào nội dung mã lệnh như sau:
3. Mở tập tin index.html và nhập vào nội dung mã lệnh như sau:
Bây giờ các bạn chạy tập tin index.html để xem kết quả.
1. Tạo cấu trúc thư mục chứa mã nguồn như sau:
Code:
css
-----style.css
index.html
CSS:
.indeterminate-preloader {
width: 100%;
height: 4px;
margin: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: linear-gradient(to right, #0062af, #0062af);
background-color: #cccccc;
background-position: -25% 0;
background-repeat: repeat-y;
background-size: 20%;
border-radius: 4px;
animation: linear-scroll 1.3s ease-in-out infinite;
}
@keyframes linear-scroll {
50% {
background-size: 80%;
}
100% {
background-position: 125% 0;
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet">
<title>Indeterminate Preloader</title>
</head>
<body>
<div class="indeterminate-preloader"></div>
</body>
</html>