اضافة تأثير التحميل على شكل سبينر

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

معاينة شكل سبينر التحميل :

ترغب فى تجربة الاضافة، اتبع الخطوات التالية

اضافة تأثير التحميل على شكل سبينر

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.