Tạo thanh hiệu ứng Indeterminate Preloader
1. Tạo cấu trúc thư mục chứa mã nguồn như sau:
css-----style.cssindex.html2. Mở tập tin css/style.css và nhập vào nội dung code như sau:
.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;
}
}
}
3. Mở tập tin index.html và nhập vào nội dung code như sau:<!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>Bây giờ các bạn chạy tập tin index.html để xem kết quả.
Tạo thanh hiệu ứng Indeterminate Preloader
Reviewed by Nguyen Nam Hong
on
8:27 PM
Rating:
Reviewed by Nguyen Nam Hong
on
8:27 PM
Rating:
