Star Đức Blog: CÁCH TẠO LOADING ICON BẰNG CSS VÀ HTML.

Ảnh minh họa.

Xin chào tất cả các bạn đã quay lại Star Đức Blog, hôm nay, mình sẽ hướng dẫn các bạn tạo hiệu ứng loading theo phong cách chuyên nghiệp bằng CSS và HTML. Bài viết này được mình tham khảo 1 Website ở nước ngoài và mình đã edit 1 số CSS. Và bây giờ mình xin chia sẻ cho các bạn.

Các bước tiến hành

HTML

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

CSS

Bước tiếp theo các bạn chỉ cần chèn CSS này vào là xong.

.animationload { background-color: #fff; height: 100%; left: 0; position: fixed; top: 0; width: 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%; width: 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-width: 10px; content: ""; height: 80px; left: -25px; position: absolute; top: -26px; width: 80px; } @keyframes osahanloading { 0% { transform: rotate(0deg); } 50% { background: #85d6de none repeat scroll 0 0; transform: rotate(180deg); } 100% { transform: rotate(360deg); } }

Tổng kết

Bài viết đến đây là kết thúc rồi, mình xin chúc các bạn thành công. Chúc các bạn 1 ngày vui vẻ!
Các bạn muốn xem Demo trực tiếp thì click tại đây nhé!