لوادر أحادية العنصر: النقاط

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

اللوادر النقطية في كل مكان. إنها أنيقة لأنها تتكون عادةً من ثلاث نقاط تبدو نوعًا ما مثل علامة الحذف (...) التي ترقص حولها.

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

يتكون هذا المثال من أداة التحميل أعلاه من عنصر div واحد ، وعدد قليل من إعلانات CSS ، ولا توجد عناصر زائفة. أنا أجمع بين تقنيتين باستخدام CSS background و mask. وعندما ننتهي ، سنرى كيف يساعد تحريك التدرج اللوني في الخلفية في خلق الوهم بأن كل نقطة تغير الألوان أثناء تحركها لأعلى ولأسفل بالتتابع.

الرسوم المتحركة الخلفية

لنبدأ بالرسوم المتحركة في الخلفية:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

آمل أن يبدو هذا واضحًا جدًا. ما لدينا هو ملف 180px-wide .loader عنصر يُظهر اثنين من التدرجات المخروطية التي تحتوي على نقاط توقف لونية صلبة بين لونين لكل منهما - يكون التدرج الأول باللون الأحمر والأزرق على طول النصف العلوي من .loader، والتدرج الثاني أخضر وأرجواني على طول النصف السفلي.

طريقة حجم خلفية اللودر (200% واسع) ، نرى فقط لونًا واحدًا من تلك الألوان في كل نصف على حدة. ثم لدينا هذه الرسوم المتحركة الصغيرة التي تدفع وضع تدرجات الخلفية إلى اليسار واليمين والعودة مرة أخرى إلى الأبد وإلى الأبد.

عند التعامل مع خصائص الخلفية - على وجه الخصوص background-position - أنا دائما أشير إلى بلدي إجابة Stack Overflow حيث أقدم شرحًا تفصيليًا حول كيفية عمل كل هذا. إذا كنت غير مرتاح لخداع خلفية CSS ، فإنني أوصي بشدة بقراءة هذه الإجابة للمساعدة في ما سيأتي بعد ذلك.

في الرسم المتحرك ، لاحظ أن الطبقة الأولى هي Y=0% (يوضع في الأعلى) بينما X التغييرات من 0% إلى 100%. بالنسبة للطبقة الثانية ، لدينا نفس الشيء لـ X لكن Y=100% (يوضع في الأسفل).

لماذا استخدام أ conic-gradient() بدلا من linear-gradient()?

سؤال جيد! بشكل حدسي ، يجب أن نستخدم التدرج الخطي لإنشاء تدرجات ثنائية اللون مثل هذا:

linear-gradient(90deg, red 50%, blue 0)

ولكن يمكننا أيضًا الوصول إلى نفس الشيء باستخدام أ conic-gradient() - وبأقل من التعليمات البرمجية. نقوم بتقليل الكود ونتعلم أيضًا خدعة جديدة في هذه العملية!

يعد تحريك الألوان إلى اليسار واليمين طريقة رائعة لجعل الأمر يبدو وكأننا نغير الألوان ، ولكن قد يكون من الأفضل إذا قمنا بتغيير الألوان على الفور بدلاً من ذلك - وبهذه الطريقة ، لا توجد فرصة لأن تومض نقطة اللودر بلونين في نفس الوقت . للقيام بذلك ، دعنا نغير ملف animationوظيفة توقيت من linear إلى steps(1)

النقاط المحمل

إذا اتبعت مع المقال الأول في هذه السلسلةأراهن أنك تعرف ما سيحدث بعد ذلك: أقنعة CSS! ما يجعل الأقنعة رائعة للغاية هو أنها تسمح لنا نوعًا ما "قص" أجزاء من الخلفية في شكل عنصر آخر. لذلك ، في هذه الحالة ، نريد عمل بضع نقاط ، وإظهار تدرجات الخلفية من خلال النقاط ، وقطع أي أجزاء من الخلفية ليست جزءًا من نقطة.

سوف نستخدم radial-gradient() لهذا:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

هناك بعض الرموز المكررة هناك ، لذلك دعونا نصنع متغير CSS لتقليل حجم الأشياء:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

رائع رائع. لكننا الآن بحاجة إلى رسم متحرك جديد يساعد في تحريك النقاط لأعلى ولأسفل بين التدرجات المتحركة.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

نعم ، هذا إجمالي ثلاثة تدرجات نصف قطرية هناك ، وكلها بنفس التكوين والحجم نفسه - ستعمل الرسوم المتحركة على تحديث موضع كل منها. نلاحظ أن X تم إصلاح تنسيق كل نقطة. ال mask-position يتم تعريفه بحيث تكون النقطة الأولى على اليسار (0%) ، والثاني في المركز (50%) والثالث على اليمين (100%). نقوم فقط بتحديث ملف Y تنسيق من 0% إلى 100% لجعل النقاط ترقص.

هذا ما نحصل عليه:

الآن ، قم بدمج هذا مع الرسوم المتحركة المتدرجة الخاصة بنا وسيبدأ السحر في الحدوث:

اختلافات محمل نقطي

إن متغير CSS الذي صنعناه في المثال الأخير يجعل من السهل جدًا التبديل بألوان جديدة وإنشاء المزيد من الأشكال المختلفة من نفس المُحمل. على سبيل المثال ، ألوان وأحجام مختلفة:

ماذا عن حركة أخرى لنقاطنا؟

هنا ، كل ما فعلته هو تحديث الرسوم المتحركة للنظر في مواضع مختلفة ، وحصلنا على أداة تحميل أخرى بنفس بنية الكود!

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

لماذا لا محمل بنقطة واحدة؟

يجب أن يكون هذا الأمر سهلًا إلى حد ما لأنني أستخدم نفس الأسلوب ولكن بمنطق أكثر بساطة:

هنا مثال آخر على اللودر حيث أقوم أيضًا بالرسوم المتحركة radial-gradient جنبا إلى جنب مع مرشحات CSS و mix-blend-mode لإنشاء تأثير blobby:

إذا قمت بالتحقق من الكود ، فسترى أن كل ما أفعله حقًا هو تحريك ملف background-position، تمامًا كما فعلنا مع أداة التحميل السابقة ، ولكن مع إضافة شرطة من background-size لجعلها تبدو وكأن النقطة تكبر لأنها تمتص النقاط.

إذا كنت تريد أن تفهم السحر وراء تأثير النقطة هذا ، يمكنك الرجوع إليه هذه الشرائح التفاعلية (Chrome فقط) بواسطة آنا تيودور لأنها تغطي الموضوع جيدًا!

إليكم فكرة أخرى لمحمل النقاط ، وهذه المرة باستخدام تقنية مختلفة:

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

أوه ، ولاحظ كيف يستخدم هذا العرض التوضيحي CSS Grid. هذا يسمح لنا بالاستفادة من الافتراضي للشبكة stretch المحاذاة بحيث تغطي كل من العناصر الزائفة المنطقة بأكملها من والدها. لا حاجة للتحجيم! ادفع حولها قليلاً باستخدام translate() وكلنا جاهزون.

مزيد من الأمثلة!

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

القادم…

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

---

لوادر أحادية العنصر: النقاط نشرت أصلا في حيل CSS. يجب احصل على النشرة الإخبارية.

• كوينسمارت. أفضل بورصة للبيتكوين والعملات المشفرة في أوروبا.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. دخول مجاني.
• كريبتوهوك. الرادار. تجربة مجانية.
• المصدر: https://css-tricks.com/single-element-loaders-the-dots/