مقدمة

يعمل المُحمل (أو أداة التحميل الدوارة) على تحسين تجربة المستخدم من خلال توفير تعليقات مرئية أثناء أوقات التحميل. في هذا البرنامج التعليمي، سنقوم بإنشاء مُحمل أنيق وحديث باستخدام HTML وCSS. هيا بنا نتعمق!

ما هو اللودر؟

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

لماذا استخدام محمل؟

• يحسن تجربة المستخدم: فهو يبقي المستخدمين على اطلاع أثناء الانتظار.
• يعزز الجماليات: يمكن للمحمل المصمم جيدًا أن يجعل موقع الويب الخاص بك يبدو أكثر احترافية.
• يمنع هجر المستخدم: من خلال تقديم تعليقات مرئية، يقل احتمال مغادرة المستخدمين أثناء الانتظار.

الخطوة 1: إعداد بنية HTML
سنبدأ ببنية HTML الأساسية للمحمل الخاص بنا. يقوم التعليمة البرمجية التالية بإنشاء حاوية للمحمل تحتوي على اثني عشر شريطًا.

الخطوة 2: التصميم باستخدام CSS
بعد ذلك، سنضيف CSS لتصميم المُحمل. إليك الكود لإنشاء محمل دائري بأشرطة متحركة.

`.المحمل {
المنصب: نسبي؛
العرض: 54 بكسل؛
الارتفاع: 54 بكسل؛
نصف قطر الحدود: 10 بكسل؛

.محمل القسم {
العرض: 8%؛
الارتفاع: 24%;
الخلفية: rgb(128, 128, 128);
الموقف: مطلق؛
اليسار: 50%;
الأعلى: 30%؛
العتامة: 0؛
نصف قطر الحدود: 50 بكسل؛
ظل الصندوق: 0 0 3px rgba(0,0,0,0.2);
الرسوم المتحركة: Fade458 1s الخطية اللانهائية؛

@keyframes Fade458 {
من {
العتامة: 1؛

ل {
العتامة: 0.25؛

}`

الخطوة 3: إضافة الرسوم المتحركة
سنقوم بتطبيق تأخيرات التدوير والرسوم المتحركة على كل شريط لإنشاء تأثير تحميل ديناميكي.

`.محمل .bar1 {
تحويل: تدوير (0 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: 0 ثانية؛

.محمل .bar2 {
تحويل: تدوير (30 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -1.1 ثانية؛

.محمل .bar3 {
تحويل: تدوير (60 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -1 ثانية؛

.محمل .bar4 {
تحويل: تدوير (90 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -0.9 ثانية؛

.محمل .bar5 {
تحويل: تدوير (120 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -0.8 ثانية؛

.محمل .bar6 {
تحويل: تدوير (150 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -0.7 ثانية؛

.محمل .bar7 {
تحويل: تدوير (180 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -0.6 ثانية؛

.محمل .bar8 {
تحويل: تدوير (210 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -0.5 ثانية؛

.محمل .bar9 {
تحويل: تدوير (240 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -0.4 ثانية؛

.محمل .bar10 {
تحويل: تدوير (270 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -0.3 ثانية؛

.محمل .bar11 {
تحويل: تدوير (300 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -0.2 ثانية؛

.محمل .bar12 {
تحويل: تدوير (330 درجة) ترجمة (0، -130٪)؛
تأخير الرسوم المتحركة: -0.1 ثانية؛
}`

الخطوة 4: دمج المُحمل في موقع الويب الخاص بك
لاستخدام أداة التحميل في مشروع الويب الخاص بك، تأكد من تضمين HTML وCSS في ملفاتك. ضع علامة HTML الخاصة بالمحمل في المكان الذي تريده، وسيظهر المحمل أثناء عمليات التحميل.

خاتمة

يمكن أن يؤدي إنشاء أداة تحميل إلى تحسين تجربة المستخدم لموقع الويب الخاص بك بشكل كبير. باستخدام HTML وCSS البسيطين، يمكنك إنشاء مُحمل وظيفي وجذاب. قم بتجربة الألوان والأحجام لتناسب تصميم موقع الويب الخاص بك!