امروز براتون کد لودینگ سایت رو تهیه کردم. این کد بر خلاف بیشتر کد ها که قسمت متحرکشون با عکس هست ، این کد قسمت متحرکش نیز با سی اس اس نوشته شده و جهت استاده شما قرار داده شده. خوبی که این ابزار داره اینه که سایت رو تا لود شدن کامل از چشم کاربراتون پنهان نگه میداره تا زمانی که سایت کامل لود نشد و ظاهر زیبای خودش رو نگرفت کاربر نتونه ببینه.
یکی دیگه از خوبی های این ابزار اینه که برای گرفتن دیتا مانند عکس به سرور دیگه ای نمیره و از سرعت بالایی هم برخوردار هست.
کد زیر رو در اویل تگ head قرار دهید.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!-- Code by : WwW.Pi3iDL.Com --> <style> body {padding:0px;margin:0px;} .loader_bg {background: #333;width:100%;height:100%;position:fixed;margin:0px;padding:0px;} .spinner {position: fixed;width: 30px;height: 30px;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} .spinner .blob {position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);border: 2px solid #fff;width: 10px;height: 10px;border-radius: 50%;} .spinner .blob.top {top: 0;-webkit-animation: blob-top 1s infinite ease-in;animation: blob-top 1s infinite ease-in;} .spinner .blob.bottom {top: 100%;-webkit-animation: blob-bottom 1s infinite ease-in;animation: blob-bottom 1s infinite ease-in;} .spinner .blob.left {left: 0;-webkit-animation: blob-left 1s infinite ease-in;animation: blob-left 1s infinite ease-in;} .spinner .move-blob {background: #fff;top: 0;-webkit-animation: blob-spinner-mover 1s infinite ease-in;animation: blob-spinner-mover 1s infinite ease-in;} @-webkit-keyframes blob-bottom {25%, 50%, 75% {top: 50%;left: 100%;}100% {top: 0;left: 50%;}} @keyframes blob-bottom {25%, 50%, 75% {top: 50%;left: 100%;}100% {top: 0;left: 50%;}} @-webkit-keyframes blob-left {25% {top: 50%;left: 0;}50%, 100% {top: 100%;left: 50%;}} @keyframes blob-left {25% {top: 50%;left: 0;}50%, 100% {top: 100%;left: 50%;}} @-webkit-keyframes blob-top {50% {top: 0;left: 50%;}75%, 100% {top: 50%;left: 0;}} @keyframes blob-top {50% {top: 0;left: 50%;}75%, 100% {top: 50%;left: 0;}} @-webkit-keyframes blob-spinner-mover {0%, 100% {top: 0;left: 50%;}25% {top: 50%;left: 100%;}50% {top: 100%;left: 50%;}75% {top: 50%;left: 0;}} @keyframes blob-spinner-mover {0%, 100% {top: 0;left: 50%;}25% {top: 50%;left: 100%;}50% {top: 100%;left: 50%;}75% {top: 50%;left: 0;}} </style> <div id="pi3idl_loader"> <div class="loader_bg"></div> <div class="spinner"> <div class="blob top"></div> <div class="blob bottom"></div> <div class="blob left"></div> <div class="blob move-blob"></div> </div> </div> <script> function pi3idl_loader() { document.getElementById('pi3idl_loader').style.display = 'none'; } window.onload = pi3idl_loader </script> <h2 style="position:fixed; top:1000%;left:1000%; width:1px; height:1px;overflow:hidden;"><a href="http://pi3idl.com">کد وبلاگ</a></h2> <h2 style="position:fixed; top:1000%;left:1000%; width:1px; height:1px;overflow:hidden;"><a href="http://www.pi3idl.com/2014/10/loading-site-full-code/">کد لود سایت</a></h2> <!-- Code by : WwW.Pi3iDL.Com --> |