كيفية إنشاء شاشة تحميل ممتعة في 5 دقائق

أولاً ، هذا ما سنبنيه. اضبطي العداد!

هل هذا يبدو مألوفا؟

إذا كانت الإجابة بنعم ، فهذا لأنك رأيت هذا في مكان ما - Slack!

دعنا نتعلم بعض الأشياء من خلال إعادة إنشاء هذا باستخدام CSS فقط وبعض HTML الجيد.

إذا كنت متحمسًا لكتابة بعض التعليمات البرمجية ، فاحصل على Codepen وأنشئ قلمًا جديدًا.

الآن دعنا نذهب!

1. الترميز

الترميز المطلوب لهذا بسيط للغاية. ها هو:

For new sidebar colors, click your workspace name, then Preferences > Sidebar > Theme
 - Your friends at Slack; 

بسيط ، هاه؟

إذا لم تكن متأكدًا من سبب وجود شرطات غريبة في أسماء الفئات ، فقد أوضحت السبب وراء ذلك في هذه المقالة.

هناك مجموعة من النصوص .loading__animوامتداد "لانتحال" الرمز المتحرك.

نتيجة هذا هو العرض البسيط أدناه.

2. توسيط المحتوى

والنتيجة ليست أجمل الأشياء التي يمكن رؤيتها. دعنا ندخل .loadingعنصر القسم بأكمله في الصفحة.

body { display: flex; justify-content: center; align-items: center; min-height: 100vh;}

هل تبحث بشكل أفضل؟

3. نمط نص التحميل

أنا أعلم. سنصل إلى الرسوم المتحركة قريبًا. في الوقت الحالي ، دعنا نصمم .loadingالنص ليبدو أفضل كثيرًا.

.loading { max-width: 50%; line-height: 1.4; font-size: 1.2rem; font-weight: bold; text-align: center;}

4. نمط نص المؤلف لتبدو مختلفة قليلا.

.loading__author { font-weight: normal; font-size: 0.9rem; color: rgba(189,189,189 ,1); margin: 0.6rem 0 2rem 0; display: block;}

ها أنت ذا!

5. إنشاء محمل متحرك

الخطوة التي طال انتظارها هنا. ستكون هذه أطول الخطوات ، لأنني سأقضي بعض الوقت للتأكد من فهمك لكيفية عملها.

إذا واجهتك مشكلة ، اترك تعليقًا وسيسعدني تقديم المساعدة.

مرحبًا ، ألق نظرة على المحمل مرة أخرى.

ستلاحظ أن نصف حدوده باللون الأزرق والنصف الآخر باللون الرمادي. حسنًا ، تم حل المشكلة. أيضًا ، HTMLلا يتم تقريب العناصر افتراضيًا. كل شيء هو عنصر مربع . سيكون التحدي الحقيقي الأول هو كيفية إعطاء .loading__animالعنصر نصف الحدود.

لا تقلق إذا لم تفهم هذا بعد. سأعود إليها.

أولاً ، دعنا نفرز أبعاد اللودر.

.loading__anim { width: 35px; height: 35px; }

الآن ، أداة التحميل على نفس سطر النص. هذا لأنه spanعنصر يحدث ليكون عنصرًا HTMLمضمنًا .

دعنا نتأكد من أن اللودر يجلس على سطر آخر ، أي أنه يبدأ في سطر آخر بدلاً من السلوك الافتراضي inlineللعناصر.

.loading__anim { width: 35px; height: 35px; display: inline-block; }

أخيرًا ، لنتأكد من أن اللودر لديه بعض الحدود المحددة.

.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); }

سيعطي هذا حدًا باللون الرمادي5px حول العنصر.

الآن ، ها هي نتيجة ذلك.

ليس رائعًا - حتى الآن. دعونا نجعل هذا أفضل.

عنصر له أربع جوانب، top، bottom، left، وright

و borderتم تطبيق إعلان وضعناها في وقت سابق إلى جميع الأطراف للعنصر.

لإنشاء اللودر ، نحتاج إلى وجهين للعنصر بألوان مختلفة.

لا يهم الجوانب التي تختارها. لقد استخدمت topو leftالجانبين أدناه

.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); border-left-color: rgba(3,155,229 ,1); border-top-color: rgba(3,155,229 ,1); }

الآن، leftو topسوف الجانبين لديهم blueish لون حدودها. ها هي نتيجة ذلك:

نحن نصل إلى مكان ما!

اللودر مستدير وليس مستطيلاً. دعنا نغير هذا بإعطاء .loader__animالعنصر a border-radiusمن50%

الآن لدينا هذا:

ليس بهذا السوء ، أليس كذلك؟

الخطوة الأخيرة هي تحريك هذا.

@keyframes rotate { to { transform: rotate(1turn) }}

نأمل أن يكون لديك فكرة عن كيفية عمل الرسوم المتحركة في CSS. 1turnيساوي 360deg، هذا هو دوران كامل يدور 360 درجة.

وقم بتطبيقه على النحو التالي:

animation: rotate 600ms infinite linear;

يو! لقد فعلناها. هل كل هذا منطقي؟

بالمناسبة ، انظر النتيجة أدناه:

رائع ، أليس كذلك؟

إذا أربكتك أي من الخطوات ، فقم بإسقاط تعليق وسيسعدني تقديم المساعدة.

هل أنت مستعد لتصبح محترفًا؟

لقد قمت بإنشاء دليل CSS مجاني للحصول على مهارات CSS الخاصة بك على الفور. احصل على الكتاب الإلكتروني المجاني.