Code hiệu ứng loading mà zcode đang sử dụng đã được tối ưu hóa nhưng thứ thừa thãi giúp code gọn và nhẹ hơn chính vì thế không làm giảm tốc độ tải trang cho wap của bạn


<style type="text/css"> .loading { font-family: Tahoma; font-size: 12px; width:200px; left:50%; top:50%; margin-left:-100px; margin-top:-33px; color:#FFF; text-align:center; padding:10px; position: fixed; } .zcode { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,183,229,0.9); opacity: .9; border-top: 5px solid rgba(0,0,0,0); border-left: 5px solid rgba(0,0,0,0); border-radius: 50px; box-shadow: 0 0 35px #2187e7; width: 50px; height: 50px; margin: 0 auto; -moz-animation: spin .5s infinite linear; -webkit-animation: spin .5s infinite linear; } .ball1 { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,183,229,0.9); opacity: .9; border-top: 5px solid rgba(0,0,0,0); border-left: 5px solid rgba(0,0,0,0); border-radius: 50px; box-shadow: 0 0 15px #2187e7; width: 30px; height: 30px; margin: 0 auto; position: relative; top: -50px; -moz-animation: spinoff .5s infinite linear; -webkit-animation: spinoff .5s infinite linear; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); }; } @-moz-keyframes spinoff { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate-360; }; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }; } @-webkit-keyframes spinoff { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate-360; }; } </style> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> <script type="text/javascript">window.onload = detectarCarga; function detectarCarga() { document.getElementById("ZcodeMB").style.display="none"; }</script> <div class="loading" id="ZcodeMB"> <div class="zcode"></div> <div class="ball1"></div>
Đã chỉnh sửa. LeYTi (13:31 / 23.09.2016) [1]