Loading icon cực sáng tạo với HTML5 & CSS3

Hôm nay mình sẽ mang đến cho các bạn thêm một mẫu loading rất dễ làm với sự kết hợp hoàn hảo giữa html và CSS3. Qua bài viết này, các bạn sẽ hiểu được cách tạo các hiệu ứng động đơn giản bằng CSS3 và có thể áp dụng hiệu ứng này ngay cho website hay blog mà các bạn đang quản lý.

Xem Demo | Download

HTML

Để tạo hiệu ứng loading, chúng ta cần các thẻ html được bố trí như sau :

<div class="animationload">
    <div class="osahanloading"></div>
</div>

CSS

Các bạn hãy xem cách tạo hiệu ứng động cực đơn giản với đoạn css bên dưới.

.animationload {
    background-color: #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    awidth: 100%;
    z-index: 10000;
}
.osahanloading {
    animation: 1.5s linear 0s normal none infinite running osahanloading;
    background: #fed37f none repeat scroll 0 0;
    border-radius: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    awidth: 50px;
}

.osahanloading::after {
    animation: 1.5s linear 0s normal none infinite running osahanloading_after;
    border-color: #85d6de transparent;
    border-radius: 80px;
    border-style: solid;
    border-awidth: 10px;
    content: "";
    height: 80px;
    left: -25px;
    position: absolute;
    top: -26px;
    awidth: 80px;
}

@keyframes osahanloading {
0% {
    transform: rotate(0deg);
}
50% {
    background: #85d6de none repeat scroll 0 0;
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}

Đây chỉ là bài viết ngắn gọn, mình mong là nó sẽ thực sự hữu ích cho những bạn mới bước đầu làm quen với thiết kế web. Hãy share cho bạn bè để cùng nhau học hỏi nhé.

Chuyên Mục: Css, HTML5

Bài viết được đăng bởi webmaster