Share Tạo vòng hiệu ứng Circular Preloader

filiallion · 02/27/2018

Tôi sử dụng CSS3 để hướng dẫn các bạn tạo vòng hiệu ứng Circular Preloader đơ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:

.circular-preloader-outer {
    display: table;
    width: 100px;
    height: 100px;
    margin: calc(50vh - 100px) auto;
    padding: 10px;
    border: 5px solid transparent;
    border-top-color: #004c89;
    border-bottom-color: #004c89;
    border-radius: 50%;
    animation: outer-rotate linear 2s infinite;
}

.circular-preloader-inner {
    display: table-cell;
    width: 10px;
    height: 10px;
    border: 5px solid transparent;
    border-left-color: #0062af;
    border-right-color: #0062af;
    border-radius: 50%;
    animation: inner-rotate linear 2s infinite;
}

@keyframes outer-rotate {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-90deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes inner-rotate {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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>Circular Preloader</title>
</head>
<body>
<div class="circular-preloader-outer">
    <div class="circular-preloader-inner"></div>
</div>
</body>
</html>

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

Share Tạo vòng hiệu ứng Circular Preloader

filiallion

Administrator

Attachments