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

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

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

 

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

 

في هذا البرنامج [Skeleton Loading Screen Animation] ، على صفحة الويب ، يظهر محمل الهيكل العظمي من خلال شكل العنصر. هذا برنامج CSS خالص ، لذلك لا تقوم شاشة الهيكل هذه بتحميل المحتوى الفعلي ولكن يمكنك بسهولة إظهار المحتوى الخاص بك عن طريق إزالة هذه الطبقة الهيكلية عند تحميل المحتوى بالكامل. إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج [Skeleton Loading Screen Animation].

 

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

 

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

 

تحميل شاشة الرسوم المتحركة الهيكل العظمي

لإنشاء هذا البرنامج (Skeleton Loader). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الرموز التالية في ملفك. أولاً ، قم بإنشاء ملف HTML باسم index.html والصق الرموز المحددة في ملف HTML الخاص بك. تذكر أنه يجب عليك إنشاء ملف بامتداد .html.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow