أضافة شريط تحميل ملون للمدونة تحت القائمة

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

معاينة

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

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

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

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

<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. الان إبحث على </body> وضع هذا الكود فوقه

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





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

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


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

شارك هذا