Share Tạo thanh hiệu ứng Indeterminate Preloader

filiallion · 02/26/2018

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:

Code:

css
-----style.css
index.html

2. Mở tập tin css/style.css và nhập vào nội dung mã lệnh như sau:

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;
    }
}

3. Mở tập tin index.html và nhập vào nội dung mã lệnh như sau:

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>

Bây giờ các bạn chạy tập tin index.html để xem kết quả.

Share Tạo thanh hiệu ứng Indeterminate Preloader

filiallion

Administrator

Attachments