صفحة إنتظار رائعة لموقعك

[اميرة عبد الدايم]

كيفية عمل صفحة إنتظار رائعة لموقعك
كود HTML

رمز Code:
<div class="spinner"> <div class="ball"> </div> <p>Loading</p> </div>
سيكون ball هو الكرة التي ستتحرك في صفحة الإنتظار
و الآن كود CSS

رمز Code:
body{ background-color:#645cc1; text-align: center; } .spinner{ width: 100px; height: 50px; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; } .ball{ width: 20px; height: 20px; background-color: #fff; border-radius: 50%; display: inline-block; -webkit-animation: motion 3s ease-in infinite; } p{ color: #fff; margin-top: 5px; font-family: sans-serif; letter-spacing: 3px; font-size: 10px; } @-webkit-keyframes motion{ 0%{ -webkit-transform: translateX(0) scale(1); } 25%{ -webkit-transform: translateX(-50px) scale(0.3); } 50%{ -webkit-transform: translateX(0) scale(1); } 75% {-webkit-transform: translateX(50px) scale(0.3);} 100% {-webkit-transform: translateX(0) scale(1);} }
و هذا كود CSS الذي سيمح بتوسيط الكرة و كلمة LOADING و الذي يسمح بتحريك الكرة
الآن و هو الأهم كيفية تحريك الكرة
قمنا بعمل animation جديد تحت إسم motion و في هذا الـanimation سنقوم بتحريك الكرة على 4 مراحل
أولا : 0% الكرة في مكانها الأصلي و بحجمها الأصلي
ثانيا : 25% الكرة تتأرجح نحو اليسار و ذلك بإستعمال : -webkit-transform: translateX(-50px) scale(0.3);
ثالثا : 50% الكرة ترجع إلى مكانها الأصلي -webkit-transform: translateX(0) scale(1);
رابعا الكرة تتأرجح نحو اليمين : {-webkit-transform: translateX(50px) scale(0.3);}
و أخيرا الكرة ترجع إلى مكانها الأصلي
الأمثلة موجودة هنا
CSS3 Loader (http://codepen.io/tdn/pen/qEKKQG)