إضافة منظر جميل (loading) أثناء تحميل موقعك
المحترف المتميز المحترف المتميز

آخر الأخبار

جاري التحميل ...

تذكر أخى قبل ترك تعليق { مَّا يَلْفِظُ مِن قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ }

إضافة منظر جميل (loading) أثناء تحميل موقعك


السلام عليكم أعضاء وزوار موقع المحترف المتميز اهلا بكم فى تدوينة جديدة خاصة بـ إضافات بلوجر طبعا الكل يعلم ان الشكل المنسق فى القالب والمنظر  الخلاب وترتيب التدوينة بشكل جيد من العوامل التى تساعد الزائر ليقضى احتياجاته وتجلب له السرور عند مروره على موقع جيد التنسيق والاضافات لذلك اقدم لكم اليوم اضافة رائعة اثناء تحميل الموقع لأن لا يمل الزائر ويترك الموقع أو المدونة

أولا قم بالبحث عن الوسم <body واضف الكود التالي أسفله مباشرة
<style>
#mmagdym1-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#34495e;z-index: 99999; opacity: .95;}
.mmagdym1-spinner { text-align: center; position: absolute; top: 50%; left: 50%; width: 80px; height: 60px; margin: -30px 0 0 -40px; }
.mmagdym1-spinner > div { background-color: #fff; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.mmagdym1-spinner .mmagdym1-rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.mmagdym1-spinner .mmagdym1-rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.mmagdym1-spinner .mmagdym1-rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.mmagdym1-spinner .mmagdym1-rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
@-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } }
@keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }
</style>
   <script type="text/javascript">
        $(window).load(function () {
            setTimeout(function () {
                $(".mmagdym1-spinner").fadeOut("slow");
                setTimeout(function () {
                    $("#mmagdym1-loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
    </script>
<div id="mmagdym1-loader">
    <div class="mmagdym1-spinner">
  <div class="mmagdym1-rect1"></div>
  <div class="mmagdym1-rect2"></div>
  <div class="mmagdym1-rect3"></div>
  <div class="mmagdym1-rect4"></div>
  <div class="mmagdym1-rect5"></div>
</div>
</div>

الكود الملون باللون الأحمر خاص بلون الخلفية غيره كما تريد

الكود الملون باللون البرتقالى خاص بالشفافية غيره كما تريد

عن الكاتب

mohamed magdy موقع المحترف المتميز هو موقع يهتم بمجال التقنية والابداع من برامج ودورات تعليمية صوت وصورة وشروحات للاندرويد والكثير من الأقسام يمكنك معرفتها بزيارتنا قم بالبحث في جوجل عن المحترف المتميز أو mmagdym1

التعليقات


جميع الحقوق محفوطة لدي موقع

المحترف المتميز

| صلي على الحبيب محمد