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:

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é