لودینگ بسیار زیبا برای وبلاگ و سایت

با استفاده از این ابزار ، لودینگ زیبایی به سایت و یا وبلاگ خود اضافه می کنید. این ابزار توسط سایت وب یار طراحی شده است.

دمو (پیش نمایش)

 در Head بگذارید

<div id="loading_rate" style="display:none;"></div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(document).ready(function(){ $('#load').hide(7000); $('#hideloading').fadeOut(1000); $('#hideloading').click(function(){ $(this).fadeOut(1000); }); }); </script> <style> .loading { background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-right: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:spinPulse 1s infinite ease-in-out; -webkit-animation:spinPulse 1s infinite linear; } .loading1 { background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-left:5px solid rgba(0,0,0,0); border-right: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:spinoffPulse 1s infinite linear; -webkit-animation:spinoffPulse 1s infinite linear; } @-moz-keyframes spinPulse { 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;} 50% { -moz-transform:rotate(145deg); opacity:1; } 100% { -moz-transform:rotate(-320deg); opacity:0; } } @-moz-keyframes spinoffPulse { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); } } @-webkit-keyframes spinPulse { 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; } 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; } } @-webkit-keyframes spinoffPulse { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } </style> <div id="hideloading" style="position:fixed;top:50%;left:50%;margin-top:-12px;margin-left:-70px;width:140px;height:24px;"><div class="loading"></div><div class="loading1"></div></div> <p style="text-align: center;"> <a href="http://WebYar.rozblog.com"><span style="font-family:comic sans ms,cursive;"><span style="font-size:20px;">WebYar</span></span></a></p>