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

عبدو تكنولوجي - Abdou Technologie

12 ديسمبر 2017

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

معاينة

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

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

إبحث على </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>

الان إبحث على </body> وضع هذا الكود فوقه

Blogger 7 ديسمبر 2018 في 10:22 ص

.انضم إلى eToro وقُد ثورة التكنولوجيا المالية

تداول من أي مكان وقتك ثمين. تداول من خلال الكمبيوتر أو الجوال أو الكمبيوتر اللوحي

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع