يمكنك أن تستعمل ال Spinner لتظهر لك أثناء تحميل الصفحة او تحميل أي محتوى او بداخل زر يقوم بجلب البيانات, في البداية نقوم بعمل البنية الخاصة بالكود وهي عبارة عن Div أو Span كما تحب وتضع له ال Class المناسب.
بعد ذلك نقوم بتنسق عنصر ال Spinner
- طول وعرض العنصر 50px ليكونوا نفس الطول والعرض
- تحويل العنصر لدائرة بواسطة Border-Radius
- عمل Border للعنصر من جميع الجهات باللون الاسود ونقوم بتقليل الشفافية Opacity حتى يظهر اللون بشفافية قليلة جدا
- تعديل لون ال Border من ناحية اليسار فقط وهذه هي فكرة إظهار ال Border الذي يقوم باللف حول العنصر
- إستدعاء ال Animation المسمى spinner وتحديد مدته ل 1 ثانية وعدد مرات تكراره إلى ما لا نهاية وتأثير التحريك Linear
- ال Margin لإبعاد العنصر عن الصفحة ليس إلا يمكنك إلغائه
الآن بقى عمل ال Animation المسئول عن التحريك والذي سوف يجعل العنصر يدور حول نفسه ومع وجود Border من جهة واحدة بلون مختلف سوف تحصل على شكل Loading Spinner بشكل جميل وظريف و كود ال Animation كالتالي
الآن كل شيء جاهز وسوف يتم تحريك العنصر ليقوم بالدوران حول نفسه ومع وجود ال Border من جهة اليسار بلون مختلف سوف ترى هذا الشكل الجميل وملحوظة يمكنك تغيير لون ال Border من ناحية اليمين واليسار ليظهر لك شكل جميل آخر وايضا يمكنك تغييره من ثلاث جهات وتترك جهة واحدة فقط وسوف ترى شكل جميل أيضا. والآن مع تجربة الكود.
0 تعليقات