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

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

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

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


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

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


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.

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

2 تعليقات