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é!
CÁCH TẠO LOADING ICON BẰNG CSS VÀ HTML. Reviewed by Lê Anh Đức on tháng 5 22, 2018 Rating: 5

Không có nhận xét nào :

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé

BIỂU MẪU LIÊN HỆ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.

Tạo Ảnh Đẹp | Cách tạo ảnh và chia sẻ tài nguyên