أضافة شريط تحميل ملون للمدونة تحت القائمة كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

ديسمبر 12, 2017

0 تعليقات

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

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

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

معاينة

مواضيع مشابهة

1. أضافة تأثير تحميل المدونة على شكل شحنة (عمل Loader انتظار تحميل الصفحة)
2. أضافة تأثير تحميل المدونة على شكل شحنة سبنر 

نبدا الان بشرح

1. إبحث على  وضع هذا الكود فوقه

<style>/* Page Loader */ .cssload-loader{position:absolute;bottom:0;right:0;left:0;margin:auto;z-index:1000} myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;right:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite} myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''} myloader [role="progressbar"][aria-busy="true"]::before{left:50%} myloader [role="progressbar"][aria-busy="true"]::after{right:50%} @-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}} @keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}} @-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}} @keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}} </style>

1. الان إبحث على  وضع هذا الكود فوقه

<script type='text/javascript'>//<![CDATA[ // Loader $(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)}); //]]></script>





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

<div class='cssload-loader' id='loader'><myloader><div aria-busy='true' aria-label='إنتضر حتى يكتمل التحميل' role='progressbar'/></myloader></div><div class='page-loader' id='pagingx'/>


الان احفظ القالب و مبروك عليك الاضافة لاتنسى الاشتراك في المدونة و على قناتي على اليوتيوب لكي تتوصل بكل جديد من شروحات مصورة على بلوجر

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2017/12/blog-post_12.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2017/12/blog-post_12.html">أضافة شريط تحميل ملون للمدونة تحت القائمة كتبها: المدون التقني - الخبير عامر بشير</a>