اضافة تاثير تحميل الصفحة بتأثير رائع وجذاب مع التنسيق+زر الاخفاء

بسم الله الرحمان الرحيم

اما بعد في شرح جديد حول طريقة اضافة تاثير تحميل الصفحة بشكل رائع مع التنسيق+زر الاخفاء

فقط وحصريا لدى مدونتنا

قد يقول البعض ان هذه الاداة موجودة مسبقا فكيف تكون حصرية ?

انا اقول انني بنيت الادة من الصفر الى الاخير واضفت اليها زر الاحفاء في حالة كان الزائر لديه انترنيت بطيئة

بالاضافة الى ان طريقة تركيبها مختلفة تماما عن ما يسود

لنبدأ على بركة الله

قد تكون رأيت الاداة من قبل عند دخولك للمدونة لكن لا بأس نعيدها مرة اخرى

المعاينة

شرح الطريقة

ابحث عن الوسم التالي
<body>

واضف تحته الكود التالي

<style><br />.test1 {<br />background:#FF5353!important;<br />  opacity: 0;<br />  position: relative;<br />  height: 0;<br />  transform: rotate(135deg);<br />  top: 20%;<br />  transition-duration: 0.6s;<br />  width: 0;<br />}<br /><br /><br />#loader button {position:fixed;top:20px;right:20px;border:0;width:auto;height:40px;background:#fff;font-family:tahoma;font-size:18px;cursor:pointer;color:#000!important;transition: all 0.5s;}<br />#loader button:hover{color:red;} <br />#loader {position:fixed;width:100%;height:100%;background:#fff;z-index:999999999;}<br />#loader span {direction:rtl;font-size:18px;color:red;}<br />#loader #co {<br />   position:absolute;<br />   left:50%;<br />   top:50%;<br />   margin-left:-10px;<br />   margin-top:-10px;<br />}<br /></style><br /><div id='loader'><br /><div id='co'><br /><center><br /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV-IARsSMN7NQXzwd-e4JjsZ4sSf96-a4odB0kBujK8DRPfWasCaJ2AfJsdf1mHEiVtPBOSmYh33u36O0xNeNSLj0YMiMTYwNrsJyJBIHMa_7vBJ75j617lUiI00rBoBXUwPK7UHt8LxYd/s1600/loader_2.gif'/><br/><br/><br /><span>جاري التحميل...</span><br /></center><br /></div><br /><button class='btn' onclick='document.getElementById('loader').className +='test1';setTimeout(function(){ document.getElementById('loader').style.display='none'; }, 3000);'>إخفاء X</button><br /></div><br />

تحديد الكل

التنسيق
background:#fff:لون الخلفية
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV-IARsSMN7NQXzwd-e4JjsZ4sSf96-a4odB0kBujK8DRPfWasCaJ2AfJsdf1mHEiVtPBOSmYh33u36O0xNeNSLj0YMiMTYwNrsJyJBIHMa_7vBJ75j617lUiI00rBoBXUwPK7UHt8LxYd/s1600/loader_2.gif
رابط الصورة
ما يلي بعض الصور اختر مايناسبك
(اضغط بزر الفارة الايمن واختر Copy Image Location)

بعدها ابحث الوسم التالي

</body>

واضف فوقه الكود التالي

<script><br />window.onload=function() {document.getElementById('loader').className +='test1';setTimeout(function(){ document.getElementById('loader').style.display='none'; }, 3000);};<br /></script><br />

تحديد الكل

هذا الكود يزيل الاداة عند انتهاء تحميل الصفحة

الى هنا انتهى الشرح استودكم الله تعالى ودائعه والسلام عليكم ورحمة الله تعالى وبركاته

التقني

اضافة تاثير تحميل الصفحة بتأثير رائع وجذاب مع التنسيق+زر الاخفاء

مواضيع دات صلة

0 تعليق على موضوع "اضافة تاثير تحميل الصفحة بتأثير رائع وجذاب مع التنسيق+زر الاخفاء"