كيف أقوم بإنشاء Spinner Loading بطريقة سهله جداََ

|Image Explain Spinner Loading|ExplainAnimatio

نظرة عامة

سيتم في هذه المقالة شرح كيفية عمل الـ Spinner Loading بواسطة الـ HTML & CSS وبطريقة سهلة جداََ وغير معقدة.

ما هو الـ Spinner Loading ؟

 

أكوادي - Akwade - تصميم مواقع

هل رأيت الصورة , كثيراََ ما ندخل لمواقع ونري مثل هذه أحد هذه الأيقونات قبل فتح الموقع , وكأنها تؤشر إلي أن الموقع يقوم بالتحميل , بالفعل هو كذلك , اثناء ظهورها يقوم الموقع بتحميل المحتويات الخاصة به , وعند الانتهاء من التحميل تختفي هذه الايقونات .

 

 ما فائدتها ؟

لو كان لديك الإنترنت بطىء , سيظهر الموقع عند تحميله بشكل غريب سواء المحتوي او الصور , ومن هنا جاءت فائده الـ 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

أكوادي - Akwade - تصميم مواقع

 

سيكون الشكل النهائي كالتالي:

 

ملاحظات

  • لا تنسي إضافة الـ Prefix الخاصة بعناصر الـ Css3 حتي يظهر التنسيق بشكل جيد علي كل المتصفحات.
  • هذا الدرس هو عبارة عن ملخص لأحد الدروس الخاصة بقناة Elzero Web School وهنا رابط الدرس.
  • في المستقبل سيكون هناك درس اخر لنفس الفكرة ولكن بشكل أكثر جمالاََ , سيتم وضع رابط الدرس هنا.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top