وضع خاصيه تحميل صفحه الويب
اهلا بكم في مدونه بنك التقنيه،سنشرح عن كيفيه وضع تحميل الصفحه بطريقه سهل وبسيطه جداا..
وتعتبر من الاشياء المميزه في المدونه،وبذلك سنقدمها في مدونه بنك التقنيه والتي توجد الكثيره يريدون معرفه كيفيه وضعها ويعجزون من فهم تلك الاكواد.
----------------------------------
مميزاتها
👈منظر خلابه لمدونه
👈متجاوبه مع جميع الاجهزه
👈دليل علي احتراف المدونه
👈مناسبه لجميع القوالب
----------------------------------
الشرح
نفتح لوحه تحكم الخاصه ببلوجره👈ندخل علي تبويب المظهره👈نضغط علي تعديلhtml 👈نقوم بالبحث علي </body>
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
نقوم بوضها قبل </body>نقوم بوضعها قبلها مباشرا
----------------------------
نقوم بالبحث عن<body> ونقوم بوضع تلك الاكواد اسفلها
----------------------------
نقوم بالبحث عن<body> ونقوم بوضع تلك الاكواد اسفلها
<div id='preloader'>
<div id='status'>
<div class='spinner'>
<div class='rect1'></div>
<div class='rect2'></div>
<div class='rect3'></div>
<div class='rect4'></div>
<div class='rect5'></div>
</div>
</div>
</div>بعد ذلك نقوم بالبحث عن كلمه</head> ثم نضع هذ الاكواد قبل اكواد css
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#status{width:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px}
.spinner{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px}
.spinner > div{background-color:#4267b2;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}
.spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}
.spinner .rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
</style>-------------------------------------النتيجه
-------------------------------------شكرا
وسلام عليكم ورحمه الله وبركاته