Share Tạo hiệu ứng preloader đẹp mắt với CSS3

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Khi các bạn vào một website nào đó sẽ thường bắt gặp hiệu ứng khá phổ biến đó là các biểu tượng hiệu ứng preloader. Đây là thành phần thường được sử dụng trong các trường hợp website phải đợi tải hoặc xử lý yêu cầu nào đó, khi đó thành phần preloader sẽ giúp cho người dùng biết được yêu cầu của mình đã được xử lý hay chưa, giúp website tương tác tốt với người dùng.

Bài viết này tôi sẽ hướng dẫn các bạn tạo ra một biểu tượng với hiệu ứng preloader chỉ bằng những dòng lệnh CSS3 đơn giản.

Các bạn tham khảo nội dung mã lệnh CSS của tôi như sau:
CSS:
.preloader-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
}

.preloader-loading {
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fbd41d none repeat scroll 0 0;
    border-radius: 50%;
    animation: 1.5s linear 0s normal none infinite running preloader;
}

.preloader-loading::after {
    width: 80px;
    height: 80px;
    position: absolute;
    top: -26px;
    left: -25px;
    content: "";
    border-color: #0078d7 transparent;
    border-radius: 80px;
    border-style: solid;
    border-width: 10px;
}

@keyframes preloader {
    0% {
        transform: rotate(0deg);
    }
    
    50% {
        background: #85d6de none repeat scroll 0 0;
        transform: rotate(180deg);
    }
    
    100% {
        transform: rotate(360deg);
    }
}
Và tạo preloader với mã lệnh HTML như sau:
HTML:
<div class="preloader-overlay">
    <div class="preloader-loading"></div>
</div>
 
Back
Top