نظرة عامة
سيتم في هذه المقالة شرح كيفية عمل الـ Spinner Loading بواسطة الـ HTML & CSS وبطريقة سهلة جداََ وغير معقدة.
ما هو الـ Spinner Loading ؟
هل رأيت الصورة , كثيراََ ما ندخل لمواقع ونري مثل هذه أحد هذه الأيقونات قبل فتح الموقع , وكأنها تؤشر إلي أن الموقع يقوم بالتحميل , بالفعل هو كذلك , اثناء ظهورها يقوم الموقع بتحميل المحتويات الخاصة به , وعند الانتهاء من التحميل تختفي هذه الايقونات .
ما فائدتها ؟
لو كان لديك الإنترنت بطىء , سيظهر الموقع عند تحميله بشكل غريب سواء المحتوي او الصور , ومن هنا جاءت فائده الـ Spinner Loading حتي لا تري شكل الموقع بشكل غريب .
الفكرة !
قبل البدء بكتابه الكود يجب عليك التحليل , ومعرفة ما ستكتب , فكرة هذا الكود بسيطة جدا ولا تتعدي الأسطر .
بدايةََ يجب ان يكون لديك عنصر من عناصر الـ HTML وإعطاءه إسم لتميزة وبعد ذلك نقوم بإعطاء هذا العنصر بعض خصائص الـ Css مثل الطول والعرض , وايضا إعطاء لون للحواف وجعله بشكل دائري من خلال خاصية border-radius وإعطاءها قيمه 50% لتصبح بشكل دائري , بعد ذلك نقوم بتغير لون جهه واحدة من الحواف , ومن ثم بواسطة الأنيميشن نقوم بجعله يتحرك بشكل دائري, ليصبح وكأنه يتحرك حول نفسه , لتفهم بشكل أكبر تابع الشرح:
إضافة عنصر الـ HTML وتميزه بإسم خاص
<div class='spinner-loading'></div>
إضافة بعض خصائص الـ Css .
الآن سنقوم بإضافة بعض خصائص الـ Css كالعرض والإرتفاع ولون الحواف وجعله بشكل دائري من خلال خاصية border-radius وإعطاءها قيمة 50%.
كما نعلم انه بإمكاننا تغير لون حواف كل جهه وإعطاءها الخصائص التي نريد في حالتنا سنقوم بتغير اي جهه من الجهات , سواء الأعلي او الأسفل , بمعني أنه سيضاف الكود التالي لما تم وضعه مسبقاََ:
border-right-color: red;
الكود يعني اننا سنغير الحافة التي بالجهة اليمني للون الأحمر .
وستكون النتيجة كالتالي:
إضافة أنيميشن لتحريك الشكل
الأنيميشن هي من خصائص الـ Css الإصدار الثالت , ولو كنت مبتدءاََ وليس لك خبرة كبيرة فيها انصحك بمراجعه هذه الفيديوهات الغنية جداََ وتشرح الـ Css3 بشكل رائع.
من خلال @keyframes الخاص بالأنيميشن سنقوم بتحديد نقطة انطلاق للتحرك ونقطه انتهاء.
نقطة الإنطلاق سيكون التحرك بشكل دائري , من نقطة صفر من خلال خاصية الـ transform وإعطائها قيمة rotate(0deg)
ونقطة الإنتهاء سيتحرك بشكل دائري ولكن بنسبة 360deg ليتحرك بشكل دائري حول نفسه.
كالتالي:
@keyframes spinnerLoading {
0 {
transform:rotate(0deg)
}
100% {
transform:rotate(360deg)
}
}
وأخيرا كل ما علينا وهو إضافة خاصية الانيميشن للعنصر .spinner-loading
سيكون الشكل النهائي كالتالي:
ملاحظات
- لا تنسي إضافة الـ Prefix الخاصة بعناصر الـ Css3 حتي يظهر التنسيق بشكل جيد علي كل المتصفحات.
- هذا الدرس هو عبارة عن ملخص لأحد الدروس الخاصة بقناة Elzero Web School وهنا رابط الدرس.
- في المستقبل سيكون هناك درس اخر لنفس الفكرة ولكن بشكل أكثر جمالاََ , سيتم وضع رابط الدرس هنا.