اضافة تأثير التحميل على شكل سبينر - سبينر هى لعبة ثلاثية الأجنحة تقوم بالدوران بشكل محوري حول نفسها، ويعتقد أنها تساعد في إكتساب الهدوء والتخلص من التوتر، وحتى لا نتكلم عن التفاصيل تم تصميم صورة متحركة على شكل سبينر يمكن تركيبها للمدونات والمواقع، ولكن هذا الدرس التعليمى عن تأثير التحميل على شكل سبينر متحرك.
معاينة شكل سبينر التحميل :
ترغب فى تجربة الاضافة، اتبع الخطوات التالية
1. اذهب الى لوحة التحكم > القالب > تحرير HTML
2. ابحث عن ]]></b:skin> ، وضع الكود التالي فوقه
3. ابحث عن </body> ، وضع الكود التالي فوقه
4. احفظ القالب
يمكنك تغيير رابط صورة سبينر المتحركة الموجودة فى الخطوة 2 اعلاها
لتغيير الصورة المتحركة اذهب الى https://loading.io وانسخ صورة التحميل المراد استخدامها بصيغة GIF.
معاينة شكل سبينر التحميل :
ترغب فى تجربة الاضافة، اتبع الخطوات التالية
اضافة تأثير التحميل على شكل سبينر
1. اذهب الى لوحة التحكم > القالب > تحرير HTML
2. ابحث عن ]]></b:skin> ، وضع الكود التالي فوقه
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://loading.io/spinners/fidget-spinner/index.fidget-spinner.gif') no-repeat 50% 50%;
padding:1em 1.2em;display:none}
3. ابحث عن </body> ، وضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>
4. احفظ القالب
تخصيص تأثير التحميل
يمكنك تغيير رابط صورة سبينر المتحركة الموجودة فى الخطوة 2 اعلاها
https://loading.io/spinners/fidget-spinner/index.fidget-spinner.gif
لتغيير الصورة المتحركة اذهب الى https://loading.io وانسخ صورة التحميل المراد استخدامها بصيغة GIF.
5 تعليقات
أنا عملت ctrl+c مانسخ الكود
ردحذفجرب مرة اخرى
حذفشكرا على مجهودك واتمنى لك التقدم بحياة سعيدة
ردحذفالعفو شكرا لمرورك الطيب 🇵🇸🔝
حذفياصديقي انا اتصفح موقعك من الجوال لكن للاسف الشديد حضرتة غير مهتدم بلاشخاص الي يزورو موقعك من الجوال لا استطيع نسخ اي كود 😢
ردحذف