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

Admin Amer

يونيو 01, 2017

0 تعليقات

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

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

1. قم بالبحث فى قالب مدونتك عن الوسم  ثم قم بوضع الكود التالى فوقة

<style> div#loading-abdoutechnologie { right: 0; bottom: 0; position: fixed; z-index: 99999999999999999999; display: block; left: 0; top: 0; background: #333; width: 100%; height: 100%; } .fidget { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; width: 150px; height: 150px; overflow: hidden; -webkit-animation: rotate .85s linear infinite; animation: rotate .85s linear infinite; } @-webkit-keyframes rotate { from { -webkit-transform: translate(-50%, -50%) rotate(0) scale(2); transform: translate(-50%, -50%) rotate(0) scale(2); } to { -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(2); transform: translate(-50%, -50%) rotate(360deg) scale(2); } } @keyframes rotate { from { -webkit-transform: translate(-50%, -50%) rotate(0) scale(2); transform: translate(-50%, -50%) rotate(0) scale(2); } to { -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(2); transform: translate(-50%, -50%) rotate(360deg) scale(2); } } .end, .center2 { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: tomato; } .end:after, .center:after { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 50%; border: 2px solid #ccc; border-radius: 50%; background-color: #333; content: ''; } .center2 { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .end { z-index: 2; } .end:nth-child(1) { top: 5px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .end:nth-child(2) { bottom: 25px; right: 15px; } .end:nth-child(3) { bottom: 25px; left: 15px; } .gap { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: tomato; z-index: 1; } .gap:after { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: #333; content: ''; } .gap:nth-child(5) { top: 35px; left: 26px; -webkit-transform: rotate(-21deg); transform: rotate(-21deg); } .gap:nth-child(5):after { top: -15px; left: -15px; } .gap:nth-child(6) { top: 35px; right: 26px; -webkit-transform: rotate(21deg); transform: rotate(21deg); } .gap:nth-child(6):after { top: -15px; right: -15px; } .gap:nth-child(7) { bottom: 9px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .gap:nth-child(7):after { bottom: -15px; } @-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(1.0)} 40%{-webkit-transform:scale(0.4)} } @keyframes bouncedelay{0%,80%,100%{transform:scale(0.0); -webkit-transform:scale(1.0)} 40%{transform:scale(1.0); -webkit-transform:scale(0.4)} } </style>

1. قم بالبحث فى قالب مدونتك عن الوسم  ثم قم بوضع الكود التالى فوقة

<b:if cond='data:blog.pageType == "item"'> <div id='loading-abdoutechnologie'> <div class='fidget'> <div class='end'/> <div class='end'/> <div class='end'/> <div class='center2'/> <div class='gap'/> <div class='gap'/> <div class='gap'/></div></div></b:if> <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/06/loader_1.html

HTML Code Of Post:

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