اللوادر ذات العنصر الواحد: الدوار

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

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

بالنسبة لهذه المقالة الأولى ، سننشئ أحد أنماط اللودر الأكثر شيوعًا: قضبان الغزل:

هذا هو النهج

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

ومع ذلك ، يتطلب التنفيذ الخاص بي عنصرًا واحدًا فقط:

<div class="loader"></div>

... و 10 إعلانات CSS:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

دعونا نكسر ذلك

للوهلة الأولى ، قد يبدو الرمز غريبًا ولكنك سترى أنه أبسط مما تعتقد. الخطوة الأولى هي تحديد بُعد العنصر. في حالتنا ، إنه ملف 150px ميدان. يمكننا أن نضع aspect-ratio لاستخدامها بحيث يظل العنصر مربعًا مهما كان الأمر.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

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

بعد ذلك ، سوف نستخدم التدرجات لإنشاء الأشرطة. هذا هو الجزء الأصعب! لنستخدم صورة واحدة؟ التدرج لخلق اثنان أشرطة مثل أدناه:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

يتم تحديد التدرج اللوني الخاص بنا بلون واحد وتوقفي لوني. والنتيجة هي لون خالص لا يتلاشى أو يتلاشى. الحجم يساوي 34% واسعة و 8% طويل. يتم وضعه أيضًا في الوسط (50%). الحيلة هي استخدام قيمة الكلمة الرئيسية space - هذا يكرر التدرج ، مما يعطينا شريطين كليين.

من المواصفات:

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

أنا أستخدم عرضًا يساوي 34% مما يعني أنه لا يمكن أن يكون لدينا أكثر من شريطين (3*34% أكبر من 100%) ولكن مع وجود عمودين سيكون لدينا مساحات فارغة (100% - 2 * 34% = 32%). يتم وضع تلك المسافة في المركز بين العمودين. بمعنى آخر ، نستخدم عرضًا للتدرج بين 33% و 50% للتأكد من وجود شريطين على الأقل مع وجود مسافة صغيرة بينهما. القيمة space هو ما يضعها لنا بشكل صحيح.

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

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

يمكننا تحسين ذلك باستخدام متغير CSS لتجنب التكرار:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

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

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

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

لاحظ استخدام display: grid. هذا يسمح لنا بالاعتماد على الشبكة الافتراضية stretch المحاذاة لجعل العنصر الزائف يغطي المنطقة الأصلية بالكامل ؛ وبالتالي ليست هناك حاجة لتحديد بُعد عليه - حيلة أخرى تقلل من الشفرة وتجنبنا التعامل مع الكثير من القيم!

الآن دعنا ندير العنصر الزائف بمقدار 45deg لوضع الأشرطة المتبقية. قم بالمرور على العرض التوضيحي التالي لمشاهدة الحيلة:

تحديد التعتيم

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

mask: conic-gradient(from 22deg,#0003,#000);

لرؤية الحيلة بشكل أفضل ، دعنا نطبق هذا على مربع ملون بالكامل:

تزداد شفافية اللون الأحمر تدريجياً في اتجاه عقارب الساعة. نطبق هذا على اللودر الخاص بنا ولدينا قضبان ذات عتامة مختلفة:

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

الدوران

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

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

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

نظرًا لأننا استخدمنا فقط ملف ::before العنصر الزائف ، يمكننا إضافة أربعة أشرطة أخرى باستخدام ::after لتنتهي بـ 12 شريطًا في المجموع ونفس الرمز تقريبًا:

نقوم بتحديث دوران العناصر الزائفة لدينا للنظر فيها 30deg و 60deg بدلا من 45deg أثناء استخدام الرسوم المتحركة المكونة من اثنتي عشرة خطوة ، بدلاً من ثمانية. أنا أيضا خفضت الارتفاع إلى 5% بدلا من 8% لجعل القضبان أرق قليلاً.

لاحظ أيضًا أن لدينا grid-area: 1/1 على العناصر الزائفة. هذا يسمح لنا بوضعها في نفس المنطقة مع بعضها البعض ، مكدسة فوق بعضها البعض.

خمين ما؟ يمكننا الوصول إلى نفس اللودر باستخدام تطبيق آخر:

هل يمكنك معرفة المنطق وراء الكود؟ إليك تلميحًا: لم يعد يتم التعامل مع التعتيم باستخدام CSS mask ولكن داخل التدرج اللوني ويستخدم أيضًا الامتداد opacity خاصية.

لماذا لا النقاط بدلا من ذلك؟

يمكننا فعل ذلك تمامًا:

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

يوجد أدناه شكل لتوضيح تكوين التدرج الجديد:

إذا كنت تستخدم Safari ، فلاحظ أن العرض التوضيحي قد يكون عربات التي تجرها الدواب. ذلك لأن Safari يفتقر حاليًا إلى دعم لـ at بناء الجملة في التدرجات الشعاعية. لكن يمكننا إعادة تكوين التدرج قليلاً للتغلب على ذلك:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

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

هذه فكرة أخرى لمحمل دوار شبيه بالفكرة السابقة.

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

لاحظ أن بعض المتصفحات لا تزال تعتمد على ملف -webkit- بادئة لـ mask-composite بمجموعة القيم الخاصة به ، ولن يتم عرض القرص الدوار في العرض التوضيحي. هذه طريقة للقيام بذلك بدون mast-composite لمزيد من دعم المتصفح.

لدي واحد آخر من أجلك:

بالنسبة لهذا الشخص ، أستخدم ملف background-color للتحكم في اللون والاستخدام mask و mask-composite لإنشاء الشكل النهائي:

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

اختتام

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

هذه فقط البداية. في هذه السلسلة ، سننظر في المزيد من الأفكار والمفاهيم المتقدمة لإنشاء لوادر CSS.

---

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

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