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

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

لنبدأ ليس بواحد ، أو اثنين ، بل 20 مثالًا على لوادر الشريط.

ماذا او ما؟! هل ستفصل كل واحد منهم؟ هذا كثير جدا لمقال!

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

لنصنع بعض الحانات!

نبدأ بتحديد الأبعاد لهم باستخدام width (أو height) مع aspect-ratio للحفاظ على النسبة:

.bars { width: 45px; aspect-ratio: 1;
}

نحن نوعًا من ثلاثة أشرطة "مزيفة" مع تدرج خطي في الخلفية - مشابه جدًا لكيفية إنشاء اللوادر النقطية في الجزء 2 من هذه السلسلة.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

سوف يعطينا الكود أعلاه النتيجة التالية:

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

تحريك القضبان

إما أن نقوم بتحريك حجم العنصر أو موضعه لإنشاء محمل الشريط. لنحرك الحجم عن طريق تحديد الإطارات الرئيسية للرسوم المتحركة التالية:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

انظر ماذا يحدث هناك؟ بين 0٪ و 100٪ ، تغير الرسوم المتحركة تنسيق background-size لتدرج خلفية العنصر. يحدد كل إطار رئيسي ثلاثة أحجام للخلفية (واحد لكل تدرج).

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

هل يمكنك أن تبدأ في تخيل كل الأشكال الممكنة التي يمكننا الحصول عليها من خلال اللعب بتكوينات مختلفة للرسوم المتحركة للأحجام أو المواضع؟

دعونا نصلح الحجم إلى 20% 50% وتحديث المواقف هذه المرة:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

... الذي يحضر لنا محمل آخر!

ربما تكون قد حصلت على الحيلة الآن. كل ما تحتاجه هو تحديد مخطط زمني تقوم بترجمته إلى إطار رئيسي. من خلال تحريك الحجم أو الموضع - أو كليهما! - هناك عدد لا حصر له من إمكانيات اللودر في متناول أيدينا.

وبمجرد أن نشعر بالراحة مع مثل هذه التقنية ، يمكننا الذهاب إلى أبعد من ذلك واستخدام تدرج أكثر تعقيدًا لإنشاء متساوٍ الأكثر من ذلك لوادر.

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

يتوهم

هل تذكرت خدعة القناع التي فعلناها مع اللوادر النقطية المقالة الثانية من هذه السلسلة؟ يمكننا أن نفعل نفس الشيء هنا!

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

لنأخذ عرضًا توضيحيًا واحدًا ونقوم بتحديثه:

كل ما فعلته هو تحديث جميع ملفات background-* مع mask-* وأضفت تلوينًا متدرجًا. بهذه البساطة ومع ذلك نحصل على محمل رائع آخر.

إذن لا فرق بين النقاط والأشرطة؟

لا فرق! لقد كتبت مقالتين مختلفتين لتغطية أكبر عدد ممكن من الأمثلة ولكن في كليهما ، أعتمد على نفس الأساليب:

1. التدرجات لإنشاء الأشكال (النقاط أو الأشرطة أو ربما أي شيء آخر)
2. منعش background-size و / أو background-position لإنشاء الرسوم المتحركة للودر
3. إضافة قناع لإضافة لمسة من الألوان

تقريب القضبان

لنجرب شيئًا مختلفًا هذه المرة حيث يمكننا تقريب أطراف القضبان.

باستخدام عنصر واحد و ::before و ::after الزائفة ، نحدد ثلاثة أشرطة متطابقة:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

هذا يعطينا ثلاثة أشرطة ، هذه المرة دون الاعتماد على التدرج الخطي:

الحيلة الآن هي ملء تلك الأشرطة بتدرج لوني جميل. لمحاكاة التدرج اللوني المستمر ، نحتاج إلى اللعب به background الخصائص. في الشكل أعلاه ، تحدد المنطقة الخضراء المنطقة التي يغطيها اللودر. يجب أن تكون هذه المنطقة بحجم التدرج ، وإذا أجرينا العمليات الحسابية ، فإنها تساوي ضرب كلا الجانبين المسمى S في الرسم التخطيطي ، أو background-size: var(--s) var(--s).

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

بالنسبة للعنصر الرئيسي (الموضوع في المنتصف) ، يجب أن تكون الخلفية في المركز. نستخدم ما يلي:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

بالنسبة للعنصر الزائف على اليسار ، نحتاج إلى الخلفية على اليسار

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

وللحصول على الصورة الزائفة على اليمين ، يجب وضع الخلفية على اليمين:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

باستخدام نفس متغير CSS ، --_i، التي استخدمناها في الترجمة ، يمكننا كتابة الكود كما يلي:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

الآن ، كل ما علينا فعله هو تحريك الارتفاع وإضافة بعض التأخيرات! فيما يلي ثلاثة أمثلة حيث كل ما هو مختلف هو الألوان والأحجام:

اختتام

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

حتى المقالة التالية ، سأتركك مع مجموعة مضحكة من اللوادر حيث أقوم بدمجها النقاط و القضبان!

---

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

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