SHARE HIỆU ỨNG LOADING TUYỆT ĐẸP CHO BLOG

Xuất bản:
TẢN MẠN
Hello, xin chào tất cả các bạn đã quay trở lại với blog của mình !!! Nhân ngày lễ Quốc Khánh (02-09) được nghỉ ở nhà, không đi chơi đâu nên ngồi viết bài - gọi là có tý quà hihi. Không liên thiên nữa thì hôm nay mình xin phép chia sẻ hiệu ứng load trang cực kì cute :)
THÔNG TIN CODE
- Code Name : Effect Loading
- Responsive : Có
- Develop : Trần Thanh Bình
- Edit & Upgrade : Nguyễn Dương Hoàng Thành
THỰC HÀNH
Rất là đơn giản, đơn giản vô cùng luôn !!! Các bạn chỉ cần chèn code bên đoạn code bên dưới vào ngay sau thẻ <body> hoặc <body
<!-- Bắt đầu loading --> <style> .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both} .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} @-webkit-keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}500%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}} @keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}} .pulse{-webkit-animation-name:pulse;animation-name:pulse} #preloader{position:fixed;top:0;left:0;height:100%;width:100%;background-color:#fff;z-index:9999999999;background-repeat:no-repeat;background-position:center center;font-family:Open Sans,sans-serif} blockquote{font-size:inherit} .loading-page{background:#000000;width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center} .loading-page .counter{text-align:center} .loading-page .counter p{font-size:40px;font-weight:100;color:#ff0050} .loading-page .counter h1{color:#fff;font-size:60px;margin-top:-10px} .loading-page .counter hr{background:#ff0000;border:none;height:2px;float:left} .loading-page .counter{position:relative;width:200px} .loading-page .counter h1.abs{position:absolute;top:0;width:100%} .loading-page .counter .color{width:0;overflow:hidden;color:#ff0050} </style> <!-- Preloader --> <div id='preloader'> <div class='loading-page'> <div class='counter'> <p><a href='//fb.com/www.leanhduc.xyz' style='color:#fff'><b target='blank' title='Click Now'><span style='background: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEgxiv9BesRNunnCW8QHW31LiT3mXpm3-DKM1gzwtdySYiFbXUg0q8EpmDJBYi_RT0G_ZU7_3P8oik9h_5nxiyVvdX9aFZs13GUKPFCHD5yll-aWM81-ihjEz4C-5vzu2dSbhs3OE4e0dV_M6QiUH8sQ0CgbrpK7BDO5gnm_TjZ3p2o=s0-d") repeat scroll 0% 0% transparent; color:#ff0000; text-shadow: 0pt 0pt #ff0000, 0pt 1pt 0.3em #ff0000;'><i class='fa fa-heart animated infinite pulse'/></span></b></a></p> <h1>0% <!-- h1.abs loading h1.abs.color loading --> </h1> <hr/> </div> </div> </div> <script type='text/javascript'>//<![CDATA[ // Loader var counter = 0; var c = 0; var i = setInterval(function(){ $(".loading-page .counter h1").html(c + "%"); $(".loading-page .counter hr").css("width", c + "%"); counter++; c++; if(counter == 101) { clearInterval(i); $("#preloader").delay(100).fadeOut(500); } }, 50); //]]></script> <!-- kết thúc Loading -->
LỜI KẾT
Nếu thầy bài viết hay và hữu ích thì tiếc gì một click quảng cáo nhỉ :v Click để mình có động lực viết bài tiếp nha <3
Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!! Xin chào và hẹn gặp lại trong bài viết lần sau hihi :)
Để anh kể cho chú nghe về một huyền thoại top 1 comment ahaha =))
Trả lờiXóakhá vl... nhanh đến kinh dị...tui vừa mới xuất bản mà =ask
XóaHồi trước có duyên với Đức lắm...h lại có duyên với bác rồi hahah...chắc phải offine buổi :D đều ở Hà Nội mà nhỉ
Xóahaha vậy chế có duyên với blog này rồi chứ chẳng phải riêng ai...không làm blogger mà chăm comment quá haha...có duyên sẽ offline với chế buổi <3 Nhất định là vậy kakak (y)
XóaCái này rất khó chiệu đối với người dungg
Trả lờiXóaDạ nhìn nó đẹp hahha. Ai thích thì dùng
XóaHổng có saooo....ai thích thì sài thôi em ơi =))
Xóabài mới đi
Trả lờiXóabài này vừa mới ra hôm qua mà bác @@
Xóanảy em nhấn ads ủng hộ anh rồi í
Trả lờiXóaem đáng yêu lắm ý haha <3
Xóanhớ ủng hộ em để em lấy mã pin nha :V
Xóa10$ là nó gửi mã về akaka...nhưng mà chờ nó về đến nhà thì hơi gian nan :D
Xóavậy 10$ là rút được rồi hả anh
Xóa100$ cơ anh ơi...10$ mới chỉ là xác minh địa chỉ thôi =))
Xóaok bác...đã cập nhật thông tin code =))
Trả lờiXóađẹp đó bác
Trả lờiXóaĐẹp vô cùng luôn haha =))
Xóadễ gây lag blog và bị giảm tốc độ load
Trả lờiXóaCũng chẳng lag lắm đâu em (y)...cái JS kia chẳng ảnh hưởng mấy :) quan trọng là có thích hay ko thôi :D
Xóađẹp hahaa <3 chúc a buổi chiều vv
Trả lờiXóa(y) Cảm ơn em nha <3
XóaChèn ít quảng cáo thôi, để chục cái banner ads nó làm giảm tốc độ load của blog đấy với lại còn lag máy nữa
Trả lờiXóaOk bác (y) Cơ mà Nâng cấp Ram + SSD lên bác haha...tui load nhanh vch luôn...ra nét càng nhanh :)
Xóanhư lol
Trả lờiXóaô địt mẹ thằng này :D
Xóatemp load hơi chậm :v
Trả lờiXóarõ ràng rồi anh ơi =))
XóaE à, a góp ý là e nên bỏ đi 1 bên quảng cáo dưới footer đi, vì nó gây phản cảm với ng đọc đấy
Trả lờiXóadạ cảm ơn anh đã góp ý ạ...em sẽ khắc phục nó
Xóaquảng cáo nhiều qá
Trả lờiXóalag không tả nổi :)
Xóadạ hahaha...phấn đấu 100$ đã...sắp được rồi nà :D
Xóaem đã click ad :v
Trả lờiXóadạ mơn anh nha <3
XóaQua click qc giúp e cái a ơi
Trả lờiXóaok em hahah <3
XóaQua click qc giúp e cái a ơi
Trả lờiXóaTrao đổi click nà =))
Xóađã click nha ><
Trả lờiXóaem qua click lại nà <3
XóaDạ haha =))
Trả lờiXóaí lỡ click rồi :"v
Trả lờiXóaAhaha ko click lại đâu =))
Xóatks bác....đã click lại =))
Trả lờiXóaChing có temp nào đẹp cho Duy xin 1 cái với ,
Trả lờiXóadạ có hahaha....nếu anh hỏi thật ko đùa thì ib fb em cho xem demo nà :D
Xóa