كيفية إنشاء تغيير لون اللودر اللامع باستخدام HTML و CSS فقط

ستتعلم اليوم في هذه المدونة كيفية إنشاء تغيير لون اللودر اللامع باستخدام HTML و CSS فقط

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

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

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

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (Color Changing Shiny Loader).

إذا كنت تحب هذا البرنامج (Color Changing Shiny Loader) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

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

تصميم أداة التحميل المسبق في HTML & CSS [أكواد المصدر]
كالعادة قبل مشاركة أكواد هذا البرنامج (Color Changing Shiny Loader). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في ملف HTML ، قمت أولاً بإنشاء <div> باسم الفئة "center" ووضعت جميع العلامات الأخرى بداخله. ثم أنشأت <div> آخر باسم الفئة "ring". داخل علامة <div class = ”center”> قمت بإنشاء علامة <span>.

في ملف CSS ، أقوم أولاً بإعادة تعيين الهوامش الافتراضية والحشو إلى 0 ؛ ووضع لون الخلفية باللون الأسود. ثم وضعت جميع العناصر في المركز باستخدام خاصية CSS Flex.

بعد وضع العناصر في المركز ، قمت بإنشاء مربع مربع ارتفاعه: 200 بكسل والعرض: 200 بكسل ؛ ثم أعطيت نصف قطر حد 50٪ ؛ لهذا المربع ، لإنشاء دائرة. وباستخدام: قبل العنصر الزائف ، قمت بإنشاء طبقة مكررة من مربع الدائرة بنفس الارتفاع والعرض. بعد ذلك ، وضعت نص التحميل ... في وسط مربع الدائرة. أخيرًا ، قمت بإنشاء رسم متحرك في حاوية الحلقة وأعطيت اسم الحركة. ثم باستخدام خاصيةkeyframe أسمي هذه الرسوم المتحركة وأقوم بتدوير هذه الحلقة 360 درجة في اتجاه عقارب الساعة. داخلkeyframe أعطيت تلك الحلقة ألوانًا مختلفة بدرجات مختلفة.

لإنشاء هذا البرنامج (Color Changing Shiny Loader). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow