أضافة صفحة تحميل أحترافية النسخه الثانية



تم تصميم صفحة تحميل احترافية بعدما نالت صفحة التحميل النسخه الاولى اعجاب الكثير من زوار ومتابعين مدونة القيسي ويب واتمنى ان تعجبكم النسخة الثانية.
كما شرحت سابقا هذه الاضافة تعطي جمال لمدونتك وخصوصا عند تصفح الزائر لمدونتكــ اي انها تظهر عند تحميل صفحات مدونتك وتختفي عند انتهاء تحميل الصفحه لا اريد ان اطيل عليكم سوف اترككم مع الشرح . طريقة التركيب
1. قم بالدخول الى تحرير قالب مدونتك وابحث عن هذه الوسم </b:skin> وضع فوقه/قبله الكود التالي

/* qaisi1web Material Loader */
#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#eceff1;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}#loader{display:block;position:relative;left:-47%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%!important;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.3s 1s ease-out;transition:all 0.3s 1s ease-out}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.progress{background-color:rgba(255,64,129,0.22)}

2. ضع الكود التالي اسفل/بعد هذه الوسم <body> مباشرة

<div id='loader-wrapper'><div id='loader'/><div class='loader-section section-left'/><div class='loader-section section-right'/></div>

3. قم بحفظ القالب وشاهد النتيجه . . . اتمنى ان تنال اعجابكم 🌹
إقرأ أيضًا
أضافة صفحة تحميل احترافية v1
ان واجهت اي مشاكل تعليقاتكم مرحب بها . . . بالتوفيق 😍

تم تصميم صفحة تحميل احترافية بعدما نالت صفحة التحميل النسخه الاولى اعجاب الكثير من زوار ومتابعي...

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
9 التعليقات
avatar

روعة أخي واصل

avatar

شكراا ليك اخي رووووعه

avatar

اخي لكن بعد ان يتم التحميل ينقلني الى صفحتك

avatar

يبدو انك تستخدم قالب من تصميم مدونة القيسي ويب وقد قمت بحذف حقوق التصميم، صفحة التحميل ليست سبب مشكلتك

avatar

نعم اخي
انا استخدم قالب فكرة مين

هل يوجد حل لهذه المشكلة
ارجواالرد باسرع وقت اخي

avatar

هل يوجد حل للمشكله
انا استخدم قالب فكرة مين

avatar

صديقي يبدو انك حذفت حقوق التصميم، اعدها وسوف يعود كل شي كما كان

كيف تعلق ؟

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *