أضافة تأثير تحميل المدونة على شكل شحنة (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

سبتمبر 15, 2017

0 تعليقات

شاركه غرد جوجل+

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

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

1. ضع هذا الكود فوق ال  

<style> div#loading-abdoutechnologie{right:0;bottom:0;position:fixed;z-index:99999999999999999999;display:block;left:0;top:0;background:#fff;width:100%;height:100%} .indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2)} .indicator svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .indicator svg polyline#back{stroke:rgba(59,211,171,0.3)} .indicator svg polyline#front{stroke:#3bd3ab;stroke-dasharray:12,36;stroke-dashoffset:48;animation:dash 1s linear infinite} .cta{position:fixed;bottom:20px;right:30px;color:#222;font-weight:bold} @-moz-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}} @-webkit-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}} @-o-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}} @keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}} </style>

1. ضع هذا الكود تحت ال  مباشرة

<div id='loading-abdoutechnologie'><div class="indicator"> <svg width="16px" height="12px"> <polyline id="back" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline> <polyline id="front" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline> </svg></div><script type='text/javascript'> $(window).load(function(){ $("#loading-abdoutechnologie").fadeOut(1000) }); </script>

و الان احفظ القالب و مبروك عليك الاضافة و لا تنسى الاشتراك في القناة و المدونة لكي نستمر في نشر اخر الاضافات

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2017/09/loader.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2017/09/loader.html">أضافة تأثير تحميل المدونة على شكل شحنة (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير</a>