المعلومات | الكاتب: | | اللقب: | Admin | الرتبه: | | الصورة الرمزية | | البيانات | الجنس : | | عدد المساهمات : | 1357 | السٌّمعَة : | 36 | تاريخ التسجيل : | 28/08/2014 | الموقع : | بيت الجزائر لكل العرب |
الإتصالات | الحالة: | | وسائل الإتصال: | |
| موضوع: css + javascript تحميل الصفحة الاحترافي الثلاثاء 23 ديسمبر 2014 - 17:52 |
|
css + javascript تحميل الصفحة الاحترافيصورة للمعاينةكود جافا -----أشر على كل الصفحات - الكود:
-
document.write('<div id="loadingAnimation"> <div id="loading_wrapper"> <div style="position:fixed; left:48%; top:48%"> <div class="circle"></div> <div class="circle1"></div> <span>تحميــــل الصفحة..</span> </div> </div></div>'); circles={ circle: { now:0, // Don't edit this 0 rotDegr: 150, // Degree in wich the cirle will move each time speed : 1000 // how long the circle will take in that move }, circle1: { now:0, // Don't edit this 0 rotDegr: -90, // Degree in wich the cirle will move each time speed : 800 // how long the circle will take in that move } }; function rotateCircle(){ console.log(circles.circle.now); var elem= $('.circle'), toDeg= circles.circle.now+circles.circle.rotDegr; $({deg: circles.circle.now}).animate({deg: toDeg}, { duration: circles.circle.speed, step: function(now){ circles.circle.now=now; elem.css({ transform: "rotate(" + now + "deg)" }); }, done: function(){ rotateCircle(); } }); } function rotateCircle1(){ var elem= $('.circle1'), toDeg= circles.circle1.now+circles.circle1.rotDegr; $({deg: circles.circle1.now}).animate({deg:toDeg}, { duration: circles.circle1.speed, step: function(now){ circles.circle1.now=now; elem.css({ transform: "rotate(" + now + "deg)" }); }, done: rotateCircle1 }); } rotateCircle(); rotateCircle1(); // remove one of this above two lines $(function(){$('#loadingAnimation').remove(); rotateCircle= function(){}; rotateCircle1= function(){};}); // remove loading animator when page is ready (all content-doms- are shown ) $(window).load(function(){$('#loadingAnimation').remove(); rotateCircle= function(){}; rotateCircle1= function(){};}); // Whait untill page is loaded compleatly (images, frames...) كود css ----- - الكود:
-
.circle { 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; } .circle1 { 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; } |
|